:root {
  color-scheme: light dark;
}

body {
  min-width: 30em;
  max-width: 60em;
  margin-left: auto;
  margin-right: auto;
  color: light-dark(black, white);
  background-color: light-dark(white, dark);
}

nav {
  text-align: center;
  font-size: 16pt;
  a {
    text-decoration: none;
    color: light-dark(black, white);
  }
  border-bottom: 2pt solid grey;
}

footer {
  border-top: 2pt solid grey;
  padding-block: 0.5em;
  font-size: 10pt;
}

main {
  padding: 0.5em;
  code {
    color: light-dark(black, white);
    background-color: light-dark(aliceblue, midnightblue);
  }
  a:visited {
    color: light-dark(darkorange, orange);
  }
  a:link {
    color: darkcyan;
  }
  a {
    text-decoration: none;
  }
  figure {
    font-size: 10pt;
    figcaption {
      padding-left: 1em;
    }
    figcaption:before {
      content: "| ";
    }
  }
  pre {
    color: light-dark(black, white);
    background-color: light-dark(aliceblue, midnightblue);
    padding-block: 0.5em;
    border-block: 1pt solid grey;
    font-size: 8pt;
  }
  pre code.shell:before {
    content: "$ ";
  }
  h2,
  h3 {
    margin-top: 1.5em;
  }
}