/* atkinson-hyperlegible-latin-400-normal */
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src:
    url(https://cdn.jsdelivr.net/fontsource/fonts/atkinson-hyperlegible@latest/latin-400-normal.woff2)
      format("woff2"),
    url(https://cdn.jsdelivr.net/fontsource/fonts/atkinson-hyperlegible@latest/latin-400-normal.woff)
      format("woff");
  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+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* atkinson-hyperlegible-latin-700-normal */
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src:
    url(https://cdn.jsdelivr.net/fontsource/fonts/atkinson-hyperlegible@latest/latin-700-normal.woff2)
      format("woff2"),
    url(https://cdn.jsdelivr.net/fontsource/fonts/atkinson-hyperlegible@latest/latin-700-normal.woff)
      format("woff");
  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+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* atkinson-hyperlegible-latin-400-italic */
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src:
    url(https://cdn.jsdelivr.net/fontsource/fonts/atkinson-hyperlegible@latest/latin-400-italic.woff2)
      format("woff2"),
    url(https://cdn.jsdelivr.net/fontsource/fonts/atkinson-hyperlegible@latest/latin-400-italic.woff)
      format("woff");
  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+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* atkinson-hyperlegible-latin-700-italic */
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: italic;
  font-display: swap;
  font-weight: 700;
  src:
    url(https://cdn.jsdelivr.net/fontsource/fonts/atkinson-hyperlegible@latest/latin-700-italic.woff2)
      format("woff2"),
    url(https://cdn.jsdelivr.net/fontsource/fonts/atkinson-hyperlegible@latest/latin-700-italic.woff)
      format("woff");
  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+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@import url("https://cdn.jsdelivr.net/npm/modern-normalize@3.0.1/modern-normalize.min.css");

:root {
  --notBlack: #191919;
  --notWhite: #fff9f2;
  --cherry: #83254f;
  --strawberry: #e56b6f;
  --mango: #ffab5c;
  --longan: #ffd8a8;
}

:root {
  font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: var(--notWhite);
  background-color: var(--notBlack);

  --linkColor: var(--strawberry);
}

@media (prefers-color-scheme: light) {
  :root {
    color: var(--notBlack);
    background-color: var(--notWhite);
    --linkColor: var(--cherry);
  }
}

main,
footer {
  max-width: 500px;
  margin: 0 auto;
}

main ul {
  text-align: left;
}

a {
  color: var(--linkColor);
  text-decoration: inherit;
}

a:hover {
  text-decoration: underline;
}

footer {
  font-size: 0.8rem;
  color: color-mix(in srgb, transparent 40%, currentColor);
}

h3 img {
  vertical-align: middle;
}