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

.gradient-bg {
  content: "";
  background: linear-gradient(
    60deg,
    #f79533,
    #f37055,
    #ef4e7b,
    #a166ab,
    #5073b8,
    #1098ad,
    #07b39b,
    #6fba82
  );
  animation: animategradient 3s ease infinite alternate;
  background-size: 300% 300%;
}

.from-teal-200 {
  --tw-gradient-from: #99f6e4;
  --tw-gradient-to: rgb(153 246 228 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-cyan-400 {
  --tw-gradient-to: #22d3ee;
}

.text-cyan-600 {
  --tw-text-opacity: 1;
  color: rgb(8 145 178 / var(--tw-text-opacity));
}

.from-teal-500 {
  --tw-gradient-from: #14b8a6;
  --tw-gradient-to: #22d3ee;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.bg-cyan-400 {
  background-color: #22d3ee;
}

.bg-teal-500 {
  background-color: #14b8a6;
}