:root {
  --body-background: #1a1a1a;
  --body-foreground: #eeeeee;
  --body-link: lightblue;
  --nav-background: #3a3a3a;
  --nav-foreground: #eeeeee;
  --nav-active-background: #eeeeee;
  --nav-active-foreground: #1a1a1a;
  --hr-background: #8a8a8a;
  --sans-serif-font: Noto Serif, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif;
  --serif-font: Noto Serif, Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --mono-font: monospace;
}

body {
  margin: 0;
  background-color: var(--body-background);
  color: var(--body-foreground);
  font-family: var(--sans-serif-font);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif-font);
}

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

a:hover {
  text-decoration: underline;
}

.nav-over, main, footer {
  max-width: 1000px;
  margin: 0 auto;
}

@media only screen and (max-width: 1100px) {
  .nav-over, main, footer {
    max-width: 800px;
  }
}

@media only screen and (max-width: 900px) {
  .nav-over, main, footer {
    max-width: 700px;
  }
}

@media only screen and (max-width: 750px) {
  .nav-over, main, footer {
    max-width: none;
  }

  .nav-title, main, footer {
    margin: 0 16px;
  }

  .nav-title h2 {
    display: block;
  }
}

.nav-under {
  background-color: var(--nav-background);
  padding: 4px 0;
}

.nav-title h2 {
  display: inline-block;
  margin-top: 0;
  margin-bottom: 0;
}

.nav-title {
  padding: 16px 0;
}

.nav-subtext {
  margin-left: 16px;
  color: #999999;
  font-style: italic;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding-left: 0;
  overflow: hidden;
}

.nav-link {
  background-color: var(--nav-background);
  color: var(--nav-foreground);
  display: block;
  padding: 8px 12px;
}

.link-active {
  background-color: var(--nav-active-background);
  color: var(--nav-active-foreground);
}

.link-left {
  float: left;
}

.link-right {
  float: right;
}

@media only screen and (max-width: 400px) {
  .link-left, .link-right {
    float: none;
  }

  .nav-under {
    display: none;
  }

  .nav-title h2 {
    display: block;
  }

  .nav-subtext {
    margin-left: 0;
  }
}

hr {
  background-color: var(--hr-background);
  height: 1px;
  border: none;
}

footer {
  text-align: center;
}

.footer-break {
  width: 120px;
}

.build-date {
  font-style: italic;
}

.badge {
  image-rendering: crisp-edges;
}

pre {
  padding: 8px;
  white-space: pre-wrap;
}

code {
  font-size: 125%;
}