setup.css

html,
body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-fg);
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", Helvetica,
    sans-serif;
}

body main, body nav {
  max-width: var(--sm-content);
}

body main h1 {
  font-size: var(--base-header);
}

@media (width <= 20rem) {
  body main h1 {
    font-size: 2.3rem;
  }
}

@media (min-width: 26rem) {
  body main h1 {
    font-size: var(--large-header);
  }
}

@media (30rem <= width <= 59rem) {
  body main, body nav {
    width: 70vw;
  }
  body main h1 {
    font-size: var(--large-header);
  }
}
@media (59rem <= width <= 69rem) {
  body main, body nav {
    width: 60vw;
  }
  body main h1 {
    font-size: var(--super-large-header);
  }
}

@media (min-width: 69rem) {
  body main, body nav {
    width: 45vw;
  }
  body main h1 {
    font-size: var(--super-large-header);
  }
}

html p {
  font-size: 1.1rem;
}