@import url("./_reset.css");
@import url("./_variables.css");
@import url("./_badge.css");
@import url("./_logo.css");
@import url("./_navbar.css");
@import url("./_section.css");
@import url("./_typography.css");
@import url("./_cols.css");
@import url("./_list.css");
@import url("./_card.css");

@import url("./osmo/_marquee.css");
@import url("./osmo/_scaling.css");
@import url("./osmo/_loader.css");
@import url("./osmo/_cursor.css");
@import url("./osmo/_guide.css");

::selection {
  background-color: var(--primary);
  color: var(--light);
}

body,
html {
  overflow-x: hidden;
  background-color: hsl(30, 100%, 97%);
}

header,
.main,
.container {
  max-width: 90rem;
  margin-inline: auto;
}

.container {
  @media screen and (min-width: 756px) {
    padding-inline: var(--spacing-md);
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@font-face {
  font-family: "Neutral Face";
  src:
    url("/fonts/NeutralFaceBold.woff2") format("woff2"),
    url("/fonts/NeutralFaceBold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neutral Face";
  src:
    url("/fonts/NeutralFaceRegular.woff2") format("woff2"),
    url("/fonts/NeutralFaceRegular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src:
    url("/fonts/Satoshi-Black.woff2") format("woff2"),
    url("/fonts/Satoshi-Black.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src:
    url("/fonts/Satoshi-BlackItalic.woff2") format("woff2"),
    url("/fonts/Satoshi-BlackItalic.woff") format("woff");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src:
    url("/fonts/Satoshi-Bold.woff2") format("woff2"),
    url("/fonts/Satoshi-Bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src:
    url("/fonts/Satoshi-BoldItalic.woff2") format("woff2"),
    url("/fonts/Satoshi-BoldItalic.woff") format("woff");
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src:
    url("/fonts/Satoshi-Italic.woff2") format("woff2"),
    url("/fonts/Satoshi-Italic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src:
    url("/fonts/Satoshi-Light.woff2") format("woff2"),
    url("/fonts/Satoshi-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src:
    url("/fonts/Satoshi-LightItalic.woff2") format("woff2"),
    url("/fonts/Satoshi-LightItalic.woff") format("woff");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src:
    url("/fonts/Satoshi-Medium.woff2") format("woff2"),
    url("/fonts/Satoshi-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src:
    url("/fonts/Satoshi-MediumItalic.woff2") format("woff2"),
    url("/fonts/Satoshi-MediumItalic.woff") format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src:
    url("/fonts/Satoshi-Regular.woff2") format("woff2"),
    url("/fonts/Satoshi-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}