tailwind.css

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

html {
  @apply h-full scroll-smooth;
}

body {
  @apply min-h-full;
}

h1, h2, h3, h4, h5, h6 { 
  @apply font-bold text-greyscale-900;
}

h1 {
  @apply text-5xl;
}

h2 {
  @apply text-4xl;
}

h3 {
  @apply text-3xl;
}

h4 {
  @apply text-2xl;
}

h5 {
  @apply text-xl;
}

h6 {
  @apply text-lg;
}

@keyframes line_animation {
  from {
    @apply left-1/2 w-0;
  }

  to {
    @apply left-0 w-full;
  }
}

.product-line-animation:after {
  @apply bg-primary content-[''] absolute -bottom-[2px] h-[2px];

  animation: line_animation 18s linear;
}

label:has(+ input[required]) {
  @apply after:content-['*'] after:text-error-300;
}

label:has(+ select[required]) {
  @apply after:content-['*'] after:text-error-300;
}