// A bunch of this is taken from PicoCSS, see here:
// https://github.com/picocss/pico/blob/v1.5.11/scss/themes/default/_styles.scss
:root {
  // Use a (minimum) font size of 16px, since this seems to be a standard font
  // size.
  font-size: 16px;
  // Explicitly set the Firefox default.
  font-weight: 400;
  // Line height of 1.5, see:
  // https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#accessibility_concerns
  line-height: 1.5;
  font-family: sans-serif;

  // Go up to 18px for the font size depending on the screen width.
  @if map-get($breakpoints, "sm") {
    @media (min-width: map-get($breakpoints, "sm")) {
      font-size: 17px;
    }
  }

  @if map-get($breakpoints, "md") {
    @media (min-width: map-get($breakpoints, "md")) {
      font-size: 18px;
    }
  }


  h1, h2, h3, h4, h5, h6 {
    // Explicitly set the Firefox default.
    font-weight: 700;
  }

  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.75rem;
  }
  h3 {
    font-size: 1.5rem;
  }
  h4 {
    font-size: 1.25rem;
  }
  h5 {
    font-size: 1.125rem;
  }
}