globals.css

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

@layer base {
  :root {
    --color-foreground: 236 15% 16%;
    --color-neutral: 224 11% 45%;
    --color-muted: 222 10% 55%;
    -moz-osx-font-smoothing: grayscale; /* Firefox */
    -webkit-font-smoothing: antialiased; /* WebKit  */
    --font-inter: "InterVariable";
  }
}

@supports (font-variation-settings: normal) {
  :root {
    font-optical-sizing: auto;
  }
}
@font-face {
  font-family: InterVariable;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/InterVariable/InterVariable.woff2") format("woff2");
}
@font-face {
  font-family: InterVariable;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/InterVariable/InterVariable-Italic.woff2") format("woff2");
}

@layer components {
  .hide-scrollbars::-webkit-scrollbar {
    background: transparent; /* Chrome/Safari/Webkit */
    width: 0px;
  }

  .hide-scrollbars {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 10+ */
  }
}