#eyeball {
   position: relative;
   top: 0;
   margin: 0;
   height: 100vh;
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   transform: translateY(var(--translateY));
   will-change: transform;
}

.eye {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  width: 40vw;
  height: 32vw;
  box-sizing: border-box;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  clip-path: polygon(50% 0, 95% 100%, 0 110%);
}
.eyeCover {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  width: 40vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("../images/eye_cover.png");
  background-position: center;
  background-size: 100% auto;
  background-repeat: no-repeat;
  pointer-events: none;
}
.eye::before {
  background-image: url("../images/eye_lid.png");
  background-position: center bottom;
  background-size: 100% auto;
  background-repeat: no-repeat;
  content: "";
  position: absolute;
  top: 10px;
  height: 100%;
  width: 100%;
  z-index: 1;
  transition: 0.5s ease;
}
.eye::after {
  background-image: url("../images/iris.png");
  background-position: center bottom;
  background-size: 50% auto;
  background-repeat: no-repeat;
  content: "";
  position: absolute;
  height: 75%;
  width: 100%;
  transition: 0.5s ease;
}

.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: 96%;
}
.eventListener:nth-child(1):hover ~ .eye::after {
  transform: translate(-5%, -10%);
}
.eventListener:nth-child(2):hover ~ .eye::before {
  height: 93%;
}
.eventListener:nth-child(2):hover ~ .eye::after {
  transform: translate(-2%, -12%);
}
.eventListener:nth-child(3):hover ~ .eye::before {
  height: 91%;
}
.eventListener:nth-child(3):hover ~ .eye::after {
  transform: translate(0%, -12%);
}
.eventListener:nth-child(4):hover ~ .eye::before {
  height: 93%;
}
.eventListener:nth-child(4):hover ~ .eye::after {
  transform: translate(2%, -12%);
}
.eventListener:nth-child(5):hover ~ .eye::before {
  height: 96%;
}
.eventListener:nth-child(5):hover ~ .eye::after {
  transform: translate(5%, -10%);
}


.eventListener:nth-child(6):hover ~ .eye::before {
  height: 98%;
}
.eventListener:nth-child(6):hover ~ .eye::after {
  transform: translate(-7%, -5%);
}
.eventListener:nth-child(7):hover ~ .eye::before {
  height: 97%;
}
.eventListener:nth-child(7):hover ~ .eye::after {
  transform: translate(-5%, -5%);
}
.eventListener:nth-child(8):hover ~ .eye::before {
  height: 96%;
}
.eventListener:nth-child(8):hover ~ .eye::after {
  transform: translate(0%, -7%);
}
.eventListener:nth-child(9):hover ~ .eye::before {
  height: 97%;
}
.eventListener:nth-child(9):hover ~ .eye::after {
  transform: translate(5%, -5%);
}
.eventListener:nth-child(10):hover ~ .eye::before {
  height: 98%;
}
.eventListener:nth-child(10):hover ~ .eye::after {
  transform: translate(7%, -5%);
}


.eventListener:nth-child(11):hover ~ .eye::before {
  height: 100%;
}
.eventListener:nth-child(11):hover ~ .eye::after {
  transform: translate(-10%, 12%);
}
.eventListener:nth-child(12):hover ~ .eye::before {
  height: 101%;
}
.eventListener:nth-child(12):hover ~ .eye::after {
  transform: translate(-6%, 10%);
}
.eventListener:nth-child(13):hover ~ .eye::before {
  height: 102%;
}
.eventListener:nth-child(13):hover ~ .eye::after {
  transform: translate(0%, 8%);
}
.eventListener:nth-child(14):hover ~ .eye::before {
  height: 101%;
}
.eventListener:nth-child(14):hover ~ .eye::after {
  transform: translate(6%, 10%);
}
.eventListener:nth-child(15):hover ~ .eye::before {
  height: 100%;
}
.eventListener:nth-child(15):hover ~ .eye::after {
  transform: translate(10%, 12%);
}


.eventListener:nth-child(16):hover ~ .eye::before {
  height: 102%;
}
.eventListener:nth-child(16):hover ~ .eye::after {
  transform: translate(-8%, 14%);
}
.eventListener:nth-child(17):hover ~ .eye::before {
  height: 103%;
}
.eventListener:nth-child(17):hover ~ .eye::after {
  transform: translate(-6%, 15%);
}
.eventListener:nth-child(18):hover ~ .eye::before {
  height: 104%;
}
.eventListener:nth-child(18):hover ~ .eye::after {
  transform: translate(0%, 16%);
}
.eventListener:nth-child(19):hover ~ .eye::before {
  height: 103%;
}
.eventListener:nth-child(19):hover ~ .eye::after {
  transform: translate(6%, 15%);
}
.eventListener:nth-child(20):hover ~ .eye::before {
  height: 102%;
}
.eventListener:nth-child(20):hover ~ .eye::after {
  transform: translate(8%, 14%);
}

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px) {

.eye {
  width: 80vw;
  height: 55vw;
}
.eye::after {
  background-size: 55% auto;
  height: 90%;
  top: 0;
}
.eye::before {
  background-size: 110% auto;
  height: 110%;
  top: 0;
}
.eyeCover {
  width: 88vw;
  height: 75vw;
}
}

@media (min-aspect-ratio: 16/9) {

.eye::after {
  background-size: 30vh auto;
  height: 27vh;
  transition: 0.5s ease;
}
.eye::before {
  background-size: 90% auto;
  top: -5vh;
  transition: 0.5s ease;
}
}