@import url("https://fonts.googleapis.com/css2?family=Mulish:wght@200;300;400;500;600;700;800&display=swap");

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

@layer base {
  html {
    scroll-behavior: smooth;
  }
  body {
    font-family: "Mulish", sans-serif;
  }
  *,
  ::after,
  ::before {
    border-color: #e5e7eb; /* Equivalent to gray-200 in Tailwind v3 */
  }
}

@layer components {
  .container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .sticky {
    @apply fixed transition z-50 bg-white bg-opacity-80;
    backdrop-filter: blur(5px);
    box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
  }

  .sticky .header-logo {
    @apply py-3 lg:py-2;
  }

  .sticky .menu-scroll.active {
    @apply text-primary;
  }

  .box input#checkboxLabel:checked ~ span {
    @apply opacity-100;
  }
}