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

html {
  scroll-behavior: smooth;
}

:root {
  /*   --hs-rotate: -5deg; */
  --hs-duration: 0.8s;
  --hs-easing: var(--hs-ease-out-back);
  /*   --hs-translate-x-amount: 10rem;
  --hs-translate-y-amount: 10rem; */
}

.my-custom-element {
  opacity: 0;
  transform: rotate(45deg);
  transition: 2s ease-in-out;
}

.my-custom-element.enter {
  opacity: 1;
  transform: rotate(0);
}

.card {
  @apply bg-zinc-700 py-24 flex flex-col space-y-8 justify-center items-center rounded-lg;
}

.section {
  @apply min-h-screen flex flex-col justify-center py-20 overflow-hidden;
}

.section-heading {
  @apply text-center text-4xl lg:text-5xl;
}

.gradient {
  background: linear-gradient(to right, #4a00e0, #8e2de2);
}

::-webkit-scrollbar {
  width: 0.5rem;
}

::-webkit-scrollbar-track {
  background: theme('colors.zinc.800');
}

::-webkit-scrollbar-thumb {
  background: theme('colors.zinc.600');
}

::-webkit-scrollbar-thumb:hover {
  background: theme('colors.zinc.500');
}