.eyehodler {
  width: 100%;
  display: flex;
  justify-content: center;
}

.eyes {
  width: 90%; /* Changed to percentage for better compatibility */
  max-width: 300px;
  padding-block: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5%; /* Adjusted for smaller screens */
}

.eyes div {
  position: relative;
  width: 25%; /* Changed to percentage */
  max-width: 100px;
  aspect-ratio: 1;
  background: #6d1f28;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eyes div:before,
.eyes div:after {
  content: '';
  position: absolute;
  width: 120%;
  height: 150%;
  left: 50%;
  z-index: 1;
}

.eyes div:before {
  top: 0;
  border-radius: 0 0 40% 40%;
  border-bottom: 40px solid black;
  transform: translateY(0) translateX(-50%);
  animation: eyelidTop 5s ease-in-out infinite;
  -webkit-animation: eyelidTop 5s ease-in-out infinite;
}

.eyes div:after {
  bottom: 0;
  border-radius: 40% 40% 0 0;
  border-top: 40px solid black;
  transform: translateY(0) translateX(-50%);
  animation: eyelidBottom 5s ease-in-out infinite;
  -webkit-animation: eyelidBottom 5s ease-in-out infinite;
}

.eyes div i {
  position: absolute;
  width: 40%;
  height: 40%;
  background: black;
  border-radius: 50%;
  z-index: 2;
  will-change: transform;
  transition: transform 0.1s ease-out;
  -webkit-transition: transform 0.1s ease-out;
  pointer-events: none;
}

/* Small Screens */
@media (max-width: 768px) {
  .eyes {
    width: 80%;
    gap: 4px;
  }
  .eyes div {
    width: 20%;
    max-width: 80px;
  }
  .eyes div i {
    width: 45%;
    height: 45%;
  }
}

/* Large Screens */
@media (min-width: 1024px) {
  .eyes {
    width: 300px;
    gap: 15px;
  }
  .eyes div {
    width: 100px;
  }
  .eyes div i {
    width: 60px;
    height: 60px;
  }
}

@keyframes eyelidTop {
  0%, 9%, 100% {
    transform: translateY(0) translateX(-50%);
  }
  3%, 6% {
    transform: translateY(-50%) translateX(-50%);
  }
}

@-webkit-keyframes eyelidTop {
  0%, 9%, 100% {
    transform: translateY(0) translateX(-50%);
  }
  3%, 6% {
    transform: translateY(-50%) translateX(-50%);
  }
}

@keyframes eyelidBottom {
  0%, 9%, 100% {
    transform: translateY(0) translateX(-50%);
  }
  3%, 6% {
    transform: translateY(50%) translateX(-50%);
  }
}

@-webkit-keyframes eyelidBottom {
  0%, 9%, 100% {
    transform: translateY(0) translateX(-50%);
  }
  3%, 6% {
    transform: translateY(50%) translateX(-50%);
  }
}