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

@layer components {
  ::selection {
    @apply bg-coffee-700 text-coffee-400;
  }

  ::-webkit-scrollbar {
    @apply w-2 rounded-full bg-transparent;
  }

  ::-webkit-scrollbar-track {
    @apply bg-transparent rounded-full;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-coffee-700 rounded-full border border-solid border-coffee-400;
  }

  ::-webkit-scrollbar-thumb:hover {
    @apply bg-coffee-800;
  }

  .caps {
    font-variant: small-caps;
  }

  body {
    @apply bg-coffee-400 font-merriweather overflow-x-hidden;
  }

  p {
    @apply font-medium font-suse;
  }

  section {
    @apply py-12 sm:py-24 md:py-28 lg:py-36;
  }

  /* .nav-link {
    @apply relative block w-full text-coffee-400 hover:bg-coffee-400/50 backdrop-blur-sm py-3 px-3 text-lg rounded-xl hover:text-coffee-900 transition-all duration-200 ease-in-out;
  */
  .nav-link {
    @apply relative px-4 w-full flex items-center justify-between text-coffee-400 text-lg rounded-xl hover:text-white transition-all duration-200 ease-in-out;
  }

  /* a.nav-link,
  .dropdown.nav-link>a,
  .dropdown.nav-link h3 {
    @apply caps;
  } */

  .navlink-dropdown {
    @apply relative w-full text-coffee-400 text-lg transition-all duration-200 ease-in-out flex items-center justify-center flex-col gap-2;
  }

  .slider-overlay {
    @apply absolute inset-0 size-full bg-gradient-to-b from-transparent via-transparent to-black/60 z-10 pointer-events-none select-none;
  }

  .is-checked {
    @apply bg-coffee-800 text-coffee-400;
  }

  .filter-black {
    filter: brightness(0) saturate(100%) invert(0%) sepia(82%) saturate(7492%)
      hue-rotate(123deg) brightness(77%) contrast(93%);
  }
}