:root {
  color-scheme: light dark;
  text-size-adjust: none;
  --columns: 2;
  --column-width: 25em;
  --column-gap: 1.5em;
}

body {
  background-color: light-dark(white, black);
  color: light-dark(black, white);
  font-family: sans-serif;
  font-size: 16px;
  hyphens: auto;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  margin: 2em;
}

nav {
  text-align: left;
  font-size: 1.5em;
  font-weight: bold;
  a {
    text-decoration: none;
    color: light-dark(black, white);
  }
}

footer {
  margin-block: 2em;
  font-size: 0.8em;
  a {
    text-decoration: none;
  }
  text-align: center;
}

.a88x31 {
  image-rendering: pixelated;
}

footer.a88x31 p {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: start;
  gap: 10px;
}

time.released:before {
  content: "Released ";
}

figcaption {
  font-size: 1em;
}

main {
  margin: auto;
  counter-reset: figure section subsection subsubsection;
  a:visited {
    color: light-dark(darkorange, orange);
  }
  a:link {
    color: darkcyan;
  }
  a {
    text-decoration: none;
  }
  h1,
  h2,
  h3 {
    break-after: avoid;
  }
  figure {
    margin: 1.5em 0;
    break-inside: avoid;
    text-align: center;
    img {
      background-color: light-dark(lightgrey, darkgrey);
    }
    figcaption {
      text-align: center;
      font-size: 0.8em;
    }
    figcaption::before {
      counter-increment: figure;
      content: "Figure " counter(figure) ": ";
    }
  }
}

pre code.shell::before {
  content: "$ ";
}

main.homepage {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: auto;
  margin-block: 2em;
}

main.homepage article {
  flex: auto;
  max-width: 25em;
  padding: 0em;
  h2 {
    margin-top: 0;
    text-align: left;
  }
  ul {
    list-style: none;
    padding: 0px;
  }
  time {
    color: light-dark(darkgrey, lightgrey);
  }
  time::after {
    content: " ";
  }
}

main.blogpost article {
  text-align: justify;
  text-justify: inter-word;
  line-height: 1.5;
  img {
    max-width: 100%;
    max-height: 20em;
  }
  pre {
    background: light-dark(#eeeeee, #111111);
    line-height: 1;
    white-space: pre;
    overflow-x: auto;
    padding: 1em;
  }
  p {
    orphans: 2;
    widows: 2;
  }
  h1 {
    column-span: all;
    text-align: center;
    font-size: 1.8em;
  }
  h2 {
    text-align: center;
    font-size: 1.5em;
    margin-top: 2em;
  }
  h3 {
    font-size: 1.2em;
  }
  h1::before {
    counter-reset: subsection subsubsection;
  }
  h2::before {
    counter-increment: subsection;
    counter-reset: subsubsection;
    content: "§ " counter(subsection) " ";
  }
  h3::before {
    counter-increment: subsubsection;
    content: "(" counter(subsubsection) ") ";
  }
  h1 + p {
    margin-block: 0;
  }
  p + p {
    text-indent: 1em;
  }
  .wide {
    column-span: all;
  }
  margin: auto;
  max-width: calc(var(--columns) * var(--column-width) + var(--column-gap));
  column-count: var(--columns);
  column-width: var(--column-width);
  column-gap: var(--column-gap);
  column-fill: balance;
}