h1 {
  position: absolute;
  left: 50%;
  top: 10%;
  justify-content: center;
  align-items: center;
  transform: translate(-50%, -50%);
  font-family: 'Indie Flower', cursive;
  color: #f97f7f;
}
body {
  position: relative;
  margin: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background-color: #f46057;
}
.eye {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  width: 20vw;
  height: 20vw;
  border-radius: 50%;
  border: 2.5vw solid #e53833;
  box-sizing: border-box;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.eye::before {
  content: "";
  position: absolute;
  top: 0;
  height: 60%;
  width: 100%;
  background-color: #f46057;
  border-radius: 10vw 10vw 0 0;
  border-bottom: 2.5vw solid #e53833;
  box-sizing: border-box;
  z-index: 1;
  transition: 0.1s, border 0s;
}
.eye::after {
  content: "";
  position: absolute;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background-color: #102a54;
  transition: 0.1s;
}
.eventListener {
  height: 100%;
  width: 100%;
  border: 1px solid;
  box-sizing: border-box;
  opacity: 0;
  user-select: none;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.eventListener:hover {
  background-color: #ff8f88;
}
.eventListener:nth-child(1):hover ~ .eye::before {
  height: 25%;
}
.eventListener:nth-child(1):hover ~ .eye::after {
  transform: translate(-30%, -50%);
}
.eventListener:nth-child(2):hover ~ .eye::before {
  height: 25%;
}
.eventListener:nth-child(2):hover ~ .eye::after {
  transform: translate(-15%, -50%);
}
.eventListener:nth-child(3):hover ~ .eye::before {
  height: 25%;
}
.eventListener:nth-child(3):hover ~ .eye::after {
  transform: translate(15%, -50%);
}
.eventListener:nth-child(4):hover ~ .eye::before {
  height: 25%;
}
.eventListener:nth-child(4):hover ~ .eye::after {
  transform: translate(30%, -50%);
}
.eventListener:nth-child(5):hover ~ .eye::before {
  height: 45%;
}
.eventListener:nth-child(5):hover ~ .eye::after {
  transform: translate(-40%, -20%);
}
.eventListener:nth-child(6):hover ~ .eye::before {
  height: 45%;
}
.eventListener:nth-child(6):hover ~ .eye::after {
  transform: translate(-25%, -20%);
}
.eventListener:nth-child(7):hover ~ .eye::before {
  height: 45%;
}
.eventListener:nth-child(7):hover ~ .eye::after {
  transform: translate(25%, -20%);
}
.eventListener:nth-child(8):hover ~ .eye::before {
  height: 45%;
}
.eventListener:nth-child(8):hover ~ .eye::after {
  transform: translate(40%, -20%);
}
.eventListener:nth-child(9):hover ~ .eye::before {
  height: 70%;
}
.eventListener:nth-child(9):hover ~ .eye::after {
  transform: translate(-40%, 20%);
}
.eventListener:nth-child(10):hover ~ .eye::before {
  height: 70%;
}
.eventListener:nth-child(10):hover ~ .eye::after {
  transform: translate(-25%, 20%);
}
.eventListener:nth-child(11):hover ~ .eye::before {
  height: 70%;
}
.eventListener:nth-child(11):hover ~ .eye::after {
  transform: translate(25%, 20%);
}
.eventListener:nth-child(12):hover ~ .eye::before {
  height: 70%;
}
.eventListener:nth-child(12):hover ~ .eye::after {
  transform: translate(40%, 20%);
}
.eventListener:nth-child(13):hover ~ .eye::before {
  height: 75%;
}
.eventListener:nth-child(13):hover ~ .eye::after {
  transform: translate(-30%, 30%);
}
.eventListener:nth-child(14):hover ~ .eye::before {
  height: 75%;
}
.eventListener:nth-child(14):hover ~ .eye::after {
  transform: translate(-10%, 30%);
}
.eventListener:nth-child(15):hover ~ .eye::before {
  height: 75%;
}
.eventListener:nth-child(15):hover ~ .eye::after {
  transform: translate(10%, 30%);
}
.eventListener:nth-child(16):hover ~ .eye::before {
  height: 75%;
}
.eventListener:nth-child(16):hover ~ .eye::after {
  transform: translate(30%, 30%);
}


/* Icons */

.as {
  color:#fff;
  background: #e53833;
  border-radius:4px;
  text-align:center;
  text-decoration:none;
  font-family:fontawesome;
  position: relative;
  display: inline-block;
  width:40px;
  height:28px;
  padding-top:12px;
  margin:0 2px;
  -o-transition:all .5s;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
   -webkit-font-smoothing: antialiased;
}

.as:hover {
  background: #c26e6b;
}

/* pop-up text */

.as span {
  color:#666;
  position:absolute;
  font-family:sans-serif;
  bottom:0;
  left:-25px;
  right:-25px;
  padding:5px 7px;
  z-index:-1;
  font-size:14px;
  border-radius:2px;
  background:#fff;
  visibility:hidden;
  opacity:0;
  -o-transition:all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -moz-transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* pop-up text arrow */

.as span:before {
  content:'';
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #fff;
  position:absolute;
  bottom:-5px;
  left:40px;
}

/* text pops up when icon is in hover state */

.as:hover span {
  bottom:50px;
  visibility:visible;
  opacity:1;
}

/* font awesome icons */

.as:nth-of-type(1):before {
content:'\f09a';
}
.as:nth-of-type(2):before {
content:'\f099';
}
.as:nth-of-type(3):before {
content:'\f16d';
}
.as:nth-of-type(4):before {
content:'\f09b';
}
.as:nth-of-type(5):before {
content:'\f044';
}


.footer {
    position: fixed;
    left: 0;
    bottom: 10;
    width: 100%;
    text-align: center;
}