* {
  box-sizing: border-box;
}

html {
  --text-color: #333;
  --background-color: white;
  --link-color: blue;
}

@media (prefers-color-scheme: dark) {
  html {
    --text-color: white;
    --background-color: #333;
    --link-color: yellow;
  }
}

body {
  margin: 0;
  padding-inline: 1em;
  font-family: Lora, Georgia, serif;
  font-size: 110%;
  line-height: 1.5;
  color: var(--text-color);
  background-color: var(--background-color);
}

@media (min-width: 1000px) {
  body {
    font-size: 125%;
  }
}

#page {
  max-width: 40em;
  margin-inline: auto;
}

h1,
h2,
h3 {
  line-height: 1.1;
  letter-spacing: -0.02em;
}

a {
  color: var(--link-color);
}

figure {
  outline: 1px dashed var(--text-color);
  margin: 0;
  padding: 1em;
}

figcaption {
  margin-top: 1ch;
  font-size: 88%;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

code {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
    'Liberation Mono', monospace;
  font-size: 87.5%;
}

blockquote {
  border-left: 0.5ch solid lightgray;
  margin-left: 1ch;
  padding-left: 1ch;
}

dt {
  font-weight: bold;
}

dd + dt {
  margin-top: 1ch;
}

nav {
  margin-block: 3em;
}

nav li {
  margin-top: 0.6ch;
}