body {
  background-color: var(--color-white);
}

.logo {
  height: 10rem;
  width: 10rem;
}

/* FONTS */
@font-face {
  font-family: "CabinetGrotesk";
  font-style: normal;
  font-weight: 100 900; /* variable font */
  src: url("/fonts/CabinetGrotesk-Variable.woff2") format("woff2");
  font-display: swap;
}

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

:root {
  --title-font: "CabinetGrotesk", Arial, sans-serif;
  --body-font: "Satoshi", Arial, sans-serif;
}

h1, h2, h3, .title {
  font-family: var(--title-font);
  font-weight: 500;
}

h1 {
  font-size: 1.75rem;
}

h2 {
  font-size: 1.5rem;
}

h3 {
  font-size: 1rem;
}


body, p {
  font-family: var(--body-font);
}

.count {
  font-size: 2rem;
}