@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/InterVariable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/InterVariable-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi/Satoshi-Bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi/Satoshi-Black.otf") format("opentype");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

:root {
  --font-body: "Inter", system-ui, sans-serif;
  --font-heading: "Satoshi", "Inter", system-ui, sans-serif;
}

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

/* Use one scrollbar styling implementation per browser. */
@supports selector(::-webkit-scrollbar) {
  html {
    &::-webkit-scrollbar,
    & ::-webkit-scrollbar {
      width: 0.5rem;
      height: 0.5rem;
      background-color: transparent;
    }

    &::-webkit-scrollbar-track,
    & ::-webkit-scrollbar-track,
    &::-webkit-scrollbar-track-piece,
    & ::-webkit-scrollbar-track-piece {
      background-color: transparent;
    }

    &::-webkit-scrollbar-thumb,
    & ::-webkit-scrollbar-thumb {
      background-color: var(--scrollbar);
    }
  }
}

@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar) transparent;
  }
}

body {
  font-family: var(--font-body);
  font-size: 1.6rem;
  line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 900;
  line-height: 1.15;
  overflow-wrap: break-word;
}

button,
input,
select,
textarea {
  font: inherit;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}