@layer utilities {
      @keyframes blob {
        0%   { border-radius: 42% 58% 63% 37% / 40% 51% 49% 60%; }
        25%  { border-radius: 50% 50% 30% 70% / 60% 40% 60% 40%; }
        50%  { border-radius: 33% 67% 67% 33% / 33% 67% 33% 67%; }
        75%  { border-radius: 60% 40% 40% 60% / 50% 60% 40% 50%; }
        100% { border-radius: 42% 58% 63% 37% / 40% 51% 49% 60%; }
      }

      .animate-blob {
        animation: blob 8s ease-in-out infinite;
      }
    }

    @keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animate-gradient {
  background-size: 200% 200%;
  animation: gradientMove 3s ease infinite;
}

.cursor {
  display: inline-block;
  width: 1px;
  animation: blink 0.7s steps(1) infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

   @keyframes wave {
      0% { transform: rotate(0deg); }
      10% { transform: rotate(14deg); }
      20% { transform: rotate(-8deg); }
      30% { transform: rotate(14deg); }
      40% { transform: rotate(-4deg); }
      50% { transform: rotate(10deg); }
      60% { transform: rotate(0deg); }
      100% { transform: rotate(0deg); }
    }

    .hover\:wave:hover {
      animation: wave 1s ease-in-out;
      display: inline-block;
      transform-origin: 70% 70%;
    }


.eye {
      width: 55px;
      height: 55px;
      background-color: white;
      border-radius: 9999px;
      border: 3px solid black;
      position: relative;
      overflow: hidden;
    }

    .pupil {
      width: 18px;
      height: 18px;
      background-color: black;
      border-radius: 9999px;
      position: absolute;
      top: 18px;
      left: 18px;
      transition: transform 0.05s linear;
    }