@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  scroll-behavior: auto;
  scroll-margin-top: 160px;
}

body {
  overflow-x: hidden !important;
}

/* width */
::-webkit-scrollbar {
  width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #111214;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #272a31;
  border-radius: 999px;
  transition: all ease-in-out 2s 0.3s;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #818695;
  transition: all ease-in-out 2s 0.3s;
}

.glow {
  background-image: conic-gradient(#fff0, #fff9);
  opacity: 0;
}

.backdrop-blur-3xl {
  -webkit-backdrop-filter: blur(64px);
}

@layer utilities {
  .link:hover .link-hover\:rotate-0 {
    --tw-rotate: 0deg;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y))
      rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
      scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }
  .link:hover .link-hover\:text-teal-3 {
    --tw-text-opacity: 1;
    color: rgb(45 184 170 / var(--tw-text-opacity)) /* #2db8aa */;
  }
}