:root {
  --bg: #fbf8f2;
  --fg: #2c2926;
  --link: #3a5f8a;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1a18;
    --fg: #e4ded4;
    --link: #8fb4dc;
  }
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Iowan Old Style", "Iowan Old Style BT", Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  font-size: 18px;
  line-height: 1.5;
  padding: 0 16px;
  margin: 60px auto;
  max-width: 620px;
}

h1 {
  font-weight: normal;
  font-size: 1.9em;
  margin: 0 0 1em;
}

li {
  margin-bottom: 0.3em;
}

a {
  color: var(--link);
  text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent);
  text-underline-offset: 0.15em;
}

a:hover {
  text-decoration-color: var(--link);
}