@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100..900&display=swap');

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

@layer base {
  * {
    font-family: "Vazirmatn", sans-serif;
  }
  ::-webkit-scrollbar {
    width: 8px;
  }
  ::-webkit-scrollbar-track {
    @apply bg-slate-100;
  }
  ::-webkit-scrollbar-thumb {
    @apply bg-slate-300 rounded-full hover:bg-brand-400 transition-colors;
  }
}

@layer components {
  #navbar.scrolled {
    background-color: rgba(255, 255, 255, 0.708) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
  }
}