body {
  background-color: white;
  font-family: sans-serif;
  font-weight: 400;
  line-height: 1.45;
  color: #333;
}

/* the :root selector is like the html selector but even higher up in scope */
:root {
  --base-size: 1em;
  --type-scale: 1.25;
  --h5: calc(var(--base-size) * var(--type-scale));
  --h4: calc(var(--h5) * var(--type-scale));
  --h3: calc(var(--h4) * var(--type-scale));
  --h2: calc(var(--h3) * var(--type-scale));
  --h1: calc(var(--h2) * var(--type-scale));
}

/* If you need to support old browsers, add a font-size above your variable font-size. Browsers that don't support vars will skip to the thing they do understand.  */
p {
  font-size: 16px;
  font-size: var(--base-size);
}

h1 {
  font-size: var(--h1);
}

h2 {
  font-size: var(--h2);
}

h3 {
  font-size: var(--h3);
}

h4 {
  font-size: var(--h4);
}

h5 {
  font-size: var(--h5);
}

small,
.text_small {
  font-size: calc(var(--base-size) / var(--type-scale));
}

@media (min-width: 480px) {
  :root {
    --base-size: 1.1em;
  }
}

@media (min-width: 768px) {
  :root {
    --base-size: 1.2em;
  }
}

@media (min-width: 940px) {
  :root {
    --base-size: 1.4em;
  }
}

@media (min-width: 1024px) {
  :root {
    --base-size: 1.6em;
  }
}

@media (min-width: 1440px) {
  :root {
    --base-size: 1.8em;
  }
}

/* Fun Fact: Type 'scale' is named after a musical 'scale' which is the distance between notes. */