:root {
    --bg-color: #000808;
    --fg-color: #68c868;
    --accent-color-1: #303840;
  }
  
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: inherit;
    border-color: inherit;
    border-radius: 0;
    line-height: inherit;
    appearance: none;
    -webkit-appearance: none;
  }
  
  html {
    background: var(--bg-color);
    color: var(--fg-color);
    padding: 3em 1.5em;
    font-family: sans-serif;
    min-height: 100vh;
    line-height: 1.35;
  }
  
  body {
    max-width: 70ch;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 1rem;
    background: none;
  }
  
  a {
    overflow-wrap: break-word;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    cursor: pointer;
  }
  
  a:hover {
    text-decoration-thickness: 2px;
  }
  
  img, video, svg {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    margin: auto;
  }
  
  figcaption {
    text-align: center;
  }
  
  pre, pre.sourceCode {
    margin: 0.5em 0;
    margin-left: 1px;
    padding: 1em;
    overflow: auto;
    border: 1px solid var(--fg-color);
  }
  
  blockquote {
    margin-left: 1px;
    padding: 0.25em 1em;
    overflow: auto;
    border-left: 1px solid var(--fg-color);
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  pre {
    counter-reset: line;
  }
  
  pre code > span:not(:first-child:last-child) {
    counter-increment: line;
  }
  
  pre code > span:not(:first-child:last-child):before {
    content: counter(line);
    opacity: 0.8;
    text-align: right;
    display: inline-block;
    min-width: 2ch;
    margin-right: 2ch;
    user-select: none;
    -webkit-user-select: none;
  }
  
  pre, code {
    font-family: monospace, monospace;
    white-space: pre;
  }
  
  :not(pre) > code {
    background: var(--accent-color-1);
    padding: 0 0.25ch;
    line-height: 1;
  }
  
  kbd {
    background: var(--accent-color-1);
    padding: 0 0.5ch;
    box-shadow: 2px 2px 0 0 var(--fg-color);
  }
  
  h1 {
    font-size: xx-large;
  }
  
  h2 {
    font-size: x-large;
  }
  
  h3 {
    font-size: large;
  }
  
  h1, h2, h3, h4, h5, h6 {
    margin: 1rem 0;
  }
  
  sub, sup {
    font-size: x-small;
  }
  
  details summary {
    cursor: pointer;
  }
  
  summary h1, summary h2, summary h3, summary h4, summary h5, summary h6 {
    display: inline;
  }
  
  details > *:not(summary) {
    margin: 1em 0;
  }
  
  ul, ol {
    margin-left: 1em;
  }
  
  .math.display {
    display: block;
    text-align: center;
  }
  
  textarea {
    resize: vertical;
  }
  
  input, textarea {
    border: 1px solid var(--fg-color);
    padding: 0.25em 0.5em;
  }
  
  input:focus, textarea:focus {
    outline: 1px solid var(--fg-color);
  }
  
  button, .button {
    border: 1px solid var(--fg-color);
    padding: 0.5em;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    white-space: pre;
  }
  
  button:hover, .button:hover {
    outline: 1px solid var(--fg-color);
  }
  
  button:active, .button:active {
    outline: 2px solid var(--fg-color);
  }
  
  hr {
    border: 0;
    border-top: 1px solid var(--fg-color);
  }
  
  body > hr {
    margin: 1em 0;
  }
  
  form, label {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
  }
  
  form {
    gap: 1em;
  }
  
  footer {
    text-align: center;
    margin-top: 2em;
    display: flex;
    flex-direction: column;
    gap: 2em;
  }
  
  noscript {
    display: block;
    border: 1px solid var(--fg-color);
    padding: 1em;
  }
  
  a.footnote-back {
    margin: 0 0.5ch;
  }
  
  .menu {
    margin: 1em 0 2em 0;
    font-size: xx-large;
    text-align: center;
  }
  
  .menu ul {
    margin: 0;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    gap: 0.5em 1em;
  }
  
  .menu li {
    display: inline-block;
  }
  
  .menu a {
    text-decoration: none;
  }
  
  .menu a:hover {
    text-decoration: underline;
  }
  
  .footnotes {
    margin: 1em 0;
    display: flex;
    flex-direction: column;
    gap: 1em;
  }
  
  .footnotes li {
    margin: 0.5em 0;
  }
  
  /* Pandoc syntax highlighting */
  
  code span {
    /* Dim the overly bright colors */
    opacity: 0.9;
  }
  
  code span.an { color: #3f8058; } /* Annotation */
  code span.at { color: #2980b9; } /* Attribute */
  code span.bn { color: #f67400; } /* BaseN */
  code span.bu { color: #7f8c8d; } /* BuiltIn */
  code span.cf { color: #fdbc4b; font-weight: bold; } /* ControlFlow */
  code span.ch { color: #3daee9; } /* Char */
  code span.cn { color: #27aeae; font-weight: bold; } /* Constant */
  code span.co { color: #7a7c7d; } /* Comment */
  code span.cv { color: #7f8c8d; } /* CommentVar */
  code span.do { color: #a43340; } /* Documentation */
  code span.dt { color: #2980b9; } /* DataType */
  code span.dv { color: #f67400; } /* DecVal */
  code span.er { color: #da4453; text-decoration: underline; } /* Error */
  code span.ex { color: #0099ff; font-weight: bold; } /* Extension */
  code span.fl { color: #f67400; } /* Float */
  code span.fu { color: #8e44ad; } /* Function */
  code span.im { color: #27ae60; } /* Import */
  code span.in { color: #c45b00; } /* Information */
  code span.kw { color: #cfcfc2; font-weight: bold; } /* Keyword */
  code span.op { color: #cfcfc2; } /* Operator */
  code span.ot { color: #27ae60; } /* Other */
  code span.pp { color: #27ae60; } /* Preprocessor */
  code span.re { color: #2980b9; background-color: #153042; } /* RegionMarker */
  code span.sc { color: #3daee9; } /* SpecialChar */
  code span.ss { color: #da4453; } /* SpecialString */
  code span.st { color: #f44f4f; } /* String */
  code span.va { color: #27aeae; } /* Variable */
  code span.vs { color: #da4453; } /* VerbatimString */
  code span.wa { color: #da4453; } /* Warning */