:root {
  --bg-color: #0c0c14;
  --fg-color: #68c868;
  --text-color: #e0e0e0;
  --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;
}

@media print, (monochrome) {
  html {
    filter: invert(1) grayscale(1) brightness(0.75) contrast(3);
  }

  img {
    filter: invert(1);
  }
}

body {
  max-width: 70ch;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 1rem;
  background: none;
}

p, li, td {
  color: var(--text-color);
  hyphens: auto;
}

a {
  overflow-wrap: break-word;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--fg-color);
  cursor: pointer;
}

a:hover {
  text-decoration-thickness: 2px;
}

img, video, svg {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  margin: auto;
}

figure {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

figcaption {
  margin: 0.5em auto;
  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);
  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);
  margin-right: 2px;
}

h1 {
  font-size: xx-large;
}

h2 {
  font-size: x-large;
}

h3 {
  font-size: large;
}

h1, h2, h3, h4, h5, h6 {
  margin: 1rem 0;
  hyphens: auto;
}

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, details > ul, details > ol {
  margin-left: 1em;
}

.math.display {
  display: block;
  text-align: center;
  overflow-x: auto;
  white-space: pre;
}

textarea {
  resize: vertical;
}

input, textarea {
  border: 1px solid var(--fg-color);
  padding: 0.25em 0.5em;
  color: var(--text-color);
}

input:focus, textarea:focus {
  outline: 1px solid var(--fg-color);
}

button, .button {
  border: 1px solid var(--fg-color);
  color: var(--text-color);
  padding: 0.5em;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
}

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;
}

iframe {
  width: 100%;
  height: 25em;
}

footer {
  text-align: center;
  margin-top: 2em;
  display: flex;
  flex-direction: column;
  gap: 2em;
}

footer p {
  color: var(--fg-color);
}

footer a {
  text-decoration-color: var(--text-color);
}

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;
  color: var(--fg-color);
}

.menu a {
  text-decoration: none;
}

.menu a:hover {
  text-decoration: underline;
  text-decoration-color: var(--text-color);
}

.footnotes {
  margin: 1em 0;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.footnotes li {
  margin: 0.5em 0;
}

/* Pandoc syntax highlighting */

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 */