:root {
  --text-color: #888;
  --light-color: #eee;
  --bg-color: #111;
  --middle-color: #222;
  --border-color: #444;
  --overflow-select-color: #223249;
  --select-color: #a7a7a7;
}

@media (prefers-color-scheme: light) {
  :root {
    --text-color: #545464;
    --light-color: #111;
    --bg-color: #f2ecbc;
    --middle-color: #e6dfb8;
    --border-color: #b8b08a;
    --overflow-select-color: #d7dbe5;
    --select-color: #a7a7a7;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg-color);
  color: var(--text-color);
  font: 1rem / 1.5 monospace;
  padding: 2em;
}

h1,
h2,
h3,
h4 {
  color: var(--light-color);
}

h1,
h2,
h3,
h4,
p,
li,
a {
  max-width: 580px;
}

li {
  max-width: 525px;
}

p {
  line-height: 1.65rem;
  text-align: justify;
}

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

a:focus {
  outline: none;
}

p a,
.note a {
  text-decoration: underline;
  text-decoration-style: wavy;
}

ul > li {
  list-style: none;
}

body > ol {
  margin-top: 0.5rem;
}

ol {
  padding-left: 2rem;
}

[id] {
  scroll-margin-top: 2rem;
}

h1,
h3,
h4,
p,
table,
.note,
.overflow-wrapper {
  margin-top: 0.5rem;
}

.footnotes,
h2 {
  margin-top: 2rem;
}

h2 {
  font-size: 1.2rem;
}

nav a,
td a {
  display: block;
  width: 100%;
}

table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
}

th,
td {
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

th,
td,
td a {
  padding: 0.15em 1.5em 0.15em 0.3em;
}

td:has(a) {
  padding: 0;
}

th {
  color: var(--light-color);
  border-bottom: 1px solid var(--border-color);
}

.shrink {
  width: 1%;
}

.note {
  padding-left: 1rem;
  border-left: 1px solid var(--border-color);
}

.not-started::after {
  content: "[NOT STARTED]";
  font-size: 1rem;
  font-weight: normal;
  color: var(--text-color);
  margin-left: 0.5em;
  white-space: nowrap;
}

.overflow-wrapper {
  overflow-x: auto;
}

pre {
  background: #181616;
  color: #c5c9c5;
  width: max-content;
  min-width: 50%;
  padding: 1rem;
}

code,
kbd,
samp {
  background: var(--middle-color);
  padding: 0.2em;
  white-space: nowrap;
}

a:hover span,
a:focus span,
.selected span {
  background: var(--light-color);
  color: var(--bg-color);
}

nav ul:hover a.selected:not(:hover) span {
  background: transparent;
  color: var(--light-color);
}

a:not(:has(span)):hover,
a:not(:has(span)):focus {
  background: var(--light-color);
  color: var(--bg-color);
  text-decoration: none;
}

tbody tr:hover {
  background: var(--middle-color);
}

::selection {
  background: var(--select-color);
  color: var(--bg-color);
}

.overflow-wrapper:has(pre) *::selection,
code::selection {
  background: var(--overflow-select-color);
  color: inherit;
}

.Operator,
.-string-regexp,
.-keyword-return,
.-keyword-operator {
  color: #c4746e;
}
.Keyword,
.-constructor-lua {
  color: #8992a7;
}
.Constant,
.Boolean {
  color: #b6927b;
}
.-punctuation-delimiter,
.-punctuation-bracket {
  color: #9e9b93;
}
.Identifier,
.-variable-member {
  color: #c4b28a;
}
.String,
code,
kbd,
samp {
  color: #8a9a7b;
}
.Number {
  color: #a292a3;
}
.Function {
  color: #8ba4b0;
}
.Special {
  color: #949fb5;
}
.-variable-parameter {
  color: #a6a69c;
}

.Keyword,
.-keyword-return,
.Function {
  font-style: italic;
}
.Boolean,
.-keyword-operator {
  font-weight: bold;
}

@media (prefers-color-scheme: light) {
  pre {
    background: #fff9dd;
    color: #545464;
  }
  .Operator,
  .-keyword-operator {
    color: #836f4a;
  }
  .-string-regexp,
  .Number {
    color: #b35b79;
  }
  .-keyword-return {
    color: #c84053;
  }
  .Keyword,
  .-constructor-lua {
    color: #624c83;
  }
  .Constant,
  .Boolean {
    color: #cc6d00;
  }
  .-punctuation-delimiter,
  .-punctuation-bracket {
    color: #4e8ca2;
  }
  .Identifier,
  .-variable-member {
    color: #77713f;
  }
  .String,
  code,
  kbd,
  samp {
    color: #6f894e;
  }
  .Function {
    color: #4d699b;
  }
  .Special {
    color: #6693bf;
  }
  .-variable-parameter {
    color: #5d57a3;
  }
}