/* open-sans-latin-wght-normal */
@font-face {
  font-family: "Open Sans Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 300 800;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/open-sans:vf@latest/latin-wght-normal.woff2)
    format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* eb-garamond-latin-wght-normal */
@font-face {
  font-family: "EB Garamond Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/eb-garamond:vf@latest/latin-wght-normal.woff2)
    format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* eb-garamond-latin-wght-italic */
@font-face {
  font-family: "EB Garamond Variable";
  font-style: italic;
  font-display: block;
  font-weight: 400 800;
  src: url(https://cdn.jsdelivr.net/fontsource/fonts/eb-garamond:vf@latest/latin-wght-italic.woff2)
    format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

* {
  font-size: 16px;
}

body {
  font-family: "Open Sans Variable";
  line-height: 1.2em;

  & header {
    width: 100dw;

    & img {
      display: block;
      margin: auto;
      max-width: 100%;
    }
  }

  & main {
    width: 88dvw;
    max-width: 700px;
    margin: auto;

    & section + section {
      margin-top: 2.5em;
    }
  }

  & h1 {
    font-style: italic;
  }

  & h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: rgb(78, 167, 95);
    text-align: center;
    font-family: "EB Garamond Variable";
  }

  & h1 {
    font-size: 2rem;
  }
  & h2 {
    font-size: 1.5rem;
  }

  & p,
  li {
    line-height: 1.2em;
    font-size: 1.2em;
    font-weight: 300;
    text-wrap: pretty;

    & strong {
      font-weight: 400;
      font-size: inherit;
    }

    & a {
      font-size: inherit;
    }
  }

  & li + li {
    margin-top: 1em;
  }

  & blockquote {
    text-align: center;
    font-family: "EB Garamond Variable";
    font-style: italic;

    & p {
      font-size: 1.2em;
      text-wrap: balance;
    }
  }

  & footer {
    padding: 1em 0;
    display: grid;
    place-items: center;
    font-weight: 500;
  }
}