@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");

:root {
  --font-inter: "Inter", sans-serif;
}
* {
  font-family: var(--font-inter);
}

.gradient-text {
  background: linear-gradient(to right, #0a6f36, #8dc926);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gooey {
  background-image: linear-gradient(120deg, #c7ff65 0%, #22ff43 100%);
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
  width: 16rem;
  height: 16rem;
  animation: morph 3s linear infinite;
  transform-style: preserve-3d;
  outline: 1px solid transparent;
  will-change: border-radius;
}
.gooey:before,
.gooey:after {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
  box-shadow: 5px 5px 89px #4ea631;
  will-change: border-radius, transform, opacity;
  animation-delay: 200ms;
  background-image: linear-gradient(120deg, #c7ff65 0%, #06bf22 100%);
}

.gooey:before {
  animation: morph 5s linear infinite;
  opacity: 0.21;
  animation-duration: 1.8s;
}

.gooey:after {
  animation: morph 5s linear infinite;
  animation-delay: 500ms;
  opacity: 0.89;
}

@keyframes morph {
  0%,
  100% {
    border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
    transform: translate3d(0, 0, 0) rotateZ(0.01deg);
  }
  34% {
    border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%;
    transform: translate3d(0, 5px, 0) rotateZ(0.02deg);
  }
  50% {
    opacity: 0.89;
    transform: translate3d(0, 0, 0) rotateZ(0.01deg);
  }
  67% {
    border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
    transform: translate3d(0, -3px, 0) rotateZ(0.001deg);
  }
}

@media screen and (min-width: 480px) {
  .gooey {
    width: 21rem;
    height: 21rem;
  }
}
@media screen and (min-width: 768px) {
  .gooey {
    width: 19rem;
    height: 19rem;
  }
}
@media screen and (min-width: 1024px) {
  .gooey {
    width: 26rem;
    height: 26rem;
  }
}
@media screen and (min-width: 1280px) {
  .gooey {
    width: 30rem;
    height: 30rem;
  }
}