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

@layer base {
  @font-face {
    font-family: Monserrat;
    src: url('../fonts/Montserrat-VariableFont_wght.ttf')format("truetype");
    font-display: swap;
  }

  html {
    font-family: "Monserrat", system-ui, sans-serif;
  }
}

@layer components {
  .btn-filled {
    @apply text-lg font-medium text-snow hover:cursor-pointer;
    @apply bg-secondary px-8 py-2 rounded-full;
    @apply hover:bg-primary duration-150
  }
  .btn-filled-no-hover {
    @apply text-lg font-medium text-snow text-center justify-center hover:cursor-pointer;
    @apply bg-secondary px-8 py-2 rounded-full items-center;
  }
}

/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
  scrollbar-width: auto;
  scrollbar-color: #546AFC white;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 16px;
}

*::-webkit-scrollbar-track {
  background: white;
}

*::-webkit-scrollbar-thumb {
  background-color: #546AFC;
  border-radius: 10px;
  border: 3px solid white;
}