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

html {
  @apply scroll-smooth;
  font-family: 'Inter', sans-serif;
  font-optical-sizing: auto;
}

body,
html {
  max-width: 100vw;
  width: 100%;
}

.dark {
  color-scheme: dark;
  background: #111827;
}
.light {
  color-scheme: light;
  background: #fff;
}

/* width */
::-webkit-scrollbar {
  @apply h-2 w-2;
}

/* Track */
::-webkit-scrollbar-track {
  @apply rounded-sm bg-[#f1f1f1];
}

/* Handle */
::-webkit-scrollbar-thumb {
  @apply rounded-sm bg-[#ccc] dark:bg-[#888];
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  @apply bg-[#888] dark:bg-[#555];
}
