:root {
  --pill-grad-1: #00babd;
  --pill-grad-2: #32f1f4;
  --pill-grad-speed: 8s;
}

.text-bg-primary-gradient,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff;
  background: linear-gradient(
    135deg,
    var(--pill-grad-1),
    var(--pill-grad-2),
    var(--pill-grad-1)
  );
  background-size: 400% 400%;
  animation: pillGradient var(--pill-grad-speed) ease-in-out infinite;
  border: 0;
}

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

@media (prefers-reduced-motion: reduce) {
  .nav-pills .nav-link.active,
  .nav-pills .show > .nav-link {
    animation: none;
  }
}

.hover-zoom {
  --zoom-scale: 1.04;
  --zoom-speed: 0.5s;
  --zoom-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  display: inline-block;
  transform-origin: center center;
  transition: transform var(--zoom-speed) var(--zoom-ease);
  will-change: transform;
}

.hover-zoom:hover,
.hover-zoom:focus-visible {
  transform: scale(var(--zoom-scale));
}

.hover-zoom:active {
  transform: scale(calc(var(--zoom-scale) - 0.02));
}

@media (prefers-reduced-motion: reduce) {
  .hover-zoom {
    transition: none;
  }
}

:root {
  --scrollbar-thumb: #00babd;
}

html {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background-color: #00babd;
}