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

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-dm-sans), sans-serif;
}

p, a, input, textarea, button, body {
  font-family: var(--font-dm-mono), monospace;
}

@layer base {
  :root {
    --radius: 0.5rem;
    --sidebar-background: 0 0% 96%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 0, 0%, 90%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 0, 0%, 90%;
    --sidebar-ring: 217.2 91.2% 59.8%;
    --sidebar-active: 44, 100%, 41%;
  }

  body {
    @apply text-black dark:text-white bg-white dark:bg-neutral-900;
  }
  .dark {
    --sidebar-background: 0 0% 15%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 0, 0%, 25%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 0, 0%, 25%;
    --sidebar-ring: 217.2 91.2% 59.8%;
    --sidebar-active: 44, 100%, 41%;
  }
}

@layer utilities {
  /* Hide scrollbar for Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
        display: none;
    }
   /* Hide scrollbar for IE, Edge and Firefox */
  .no-scrollbar {
      -ms-overflow-style: none;  /* IE and Edge */
      scrollbar-width: none;  /* Firefox */
  }

  /* Black scrollbar for Chrome, Safari and Opera */
  .black-scrollbar::-webkit-scrollbar {
    width: 8px;
  }
  
  .black-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .black-scrollbar::-webkit-scrollbar-thumb {
    background: #000000;
    border-radius: 4px;
  }
  
  .black-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #333333;
  }

  /* Black scrollbar for Firefox */
  .black-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #000000 transparent;
  }
}
