body {
  margin: 1em auto;
  padding: 0 1rem;
  max-width: 80ch;
  line-height: 1.5;
  font-family: sans-serif;
  background-color: #1E1F21;
  color: #EEEFF1;
  font-size: 1rem;
}
section, main {
  margin: 0;
  padding: 0;
}
main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
section {
  min-width: 29ch;
  flex: 50;
}
section + section {
  flex: 25;
  text-align: center;
}
section > figure {
  display: inline-block;
  max-width: 60%;
  border: solid #333333 1px;
  padding: 1em;
  margin: 2rem;
}
figcaption {
  font-size: 1rem;
}
a { color: #56b4e9; }
a:visited { color: #cc79a7; }
h1, h2, h3, h4, h5, h6 { font-family: serif; }
h1 { font-size: 2.5rem; }
h1, h2 { text-align: center; }
h2 {
  font-weight: normal;
  font-variant: small-caps;
  letter-spacing: .2rem;
}
h3 { display: run-in; }
code, pre {
  font-family: monospace;
  word-wrap: break-word;
  white-space: pre;
  overflow: auto;
}
details {
  padding: 0.5em;
  border: solid 1px gray;
}
details pre {
  overflow: scroll;
}
ul { padding-left: 1.5em; }

@media (prefers-color-scheme: light) {
  body {
    background-color: #ffffff;
    color: #111111;
  }
}