:root {
  --bg: white;
  --fg: black;
  --mid: gray;
  --link-color: blue;
  --link-highlight: white;
  --link-hover: blue;
  --link-visited: blueviolet;
  --table-head: #aaa;
  --table-even-row: #ddd;
  --code-bg: #f9f5d7;
  --code-fg: #504945;
  --code-border: #ebdbb2;
  --code-comment: #bdae93;
  --code-base16-0: #f9f5d7;
  --code-base16-1: #ebdbb2;
  --code-base16-2: #d5c4a1;
  --code-base16-3: #bdae93;
  --code-base16-4: #665c54;
  --code-base16-5: #504945;
  --code-base16-6: #3c3836;
  --code-base16-7: #282828;
  --code-base16-8: #9d0006;
  --code-base16-9: #af3a03;
  --code-base16-a: #b57614;
  --code-base16-b: #79740e;
  --code-base16-c: #427b58;
  --code-base16-d: #076678;
  --code-base16-e: #8f3f71;
  --code-base16-f: #d65d0e;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: white;
    --fg: black;
    --mid: gray;
    --link-color: blue;
    --link-highlight: white;
    --link-hover: blue;
    --link-visited: blueviolet;
    --table-head: #aaa;
    --table-even-row: #ddd;
    --code-bg: #f9f5d7;
    --code-fg: #504945;
    --code-border: #ebdbb2;
    --code-comment: #bdae93;
    --code-base16-0: #f9f5d7;
    --code-base16-1: #ebdbb2;
    --code-base16-2: #d5c4a1;
    --code-base16-3: #bdae93;
    --code-base16-4: #665c54;
    --code-base16-5: #504945;
    --code-base16-6: #3c3836;
    --code-base16-7: #282828;
    --code-base16-8: #9d0006;
    --code-base16-9: #af3a03;
    --code-base16-a: #b57614;
    --code-base16-b: #79740e;
    --code-base16-c: #427b58;
    --code-base16-d: #076678;
    --code-base16-e: #8f3f71;
    --code-base16-f: #d65d0e;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: black;
    --fg: white;
    --mid: gray;
    --link-color: lightblue;
    --link-highlight: white;
    --link-hover: blue;
    --link-visited: orchid;
    --table-head: #ffffff88;
    --table-even-row: #ffffff33;
    --code-bg: #1d2021;
    --code-fg: #d5c4a1;
    --code-border: #3c3836;
    --code-comment: #665c54;
    --code-base16-0: #1d2021;
    --code-base16-1: #3c3836;
    --code-base16-2: #504945;
    --code-base16-3: #665c54;
    --code-base16-4: #bdae93;
    --code-base16-5: #d5c4a1;
    --code-base16-6: #ebdbb2;
    --code-base16-7: #fbf1c7;
    --code-base16-8: #fb4934;
    --code-base16-9: #fe8019;
    --code-base16-a: #fabd2f;
    --code-base16-b: #b8bb26;
    --code-base16-c: #8ec07c;
    --code-base16-d: #83a598;
    --code-base16-e: #d3869b;
    --code-base16-f: #d65d0e;
  }
}

html {
  background-color: white;
  background-color: var(--bg);
  background-image: url("/assets/checker.png");
  background-attachment: fixed;
  /* suffering */
  image-rendering: optimizeSpeed;
  image-rendering: optimizespeed;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  font-size: 12pt;
}

html.nobg {
  background-image: none;
}

body {
  margin: 0 auto;
  padding: 1em;
  max-width: 56em;
  background-color: white;
  background-color: var(--bg);
  color: black;
  color: var(--fg);
  font-family: sans-serif;
}

img {
  max-width: 100%;
}

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

a:link:hover, a:link:focus {
  color: white;
  color: var(--link-highlight);
  background-color: blue;
  background-color: var(--link-hover);
}

a:visited {
  color: blueviolet;
  color: var(--link-visited);
}

a:visited:hover, a:visited:focus {
  color: white;
  color: var(--link-highlight);
  background-color: blueviolet;
  background-color: var(--link-visited);
}

a::after {
  display: inline-block;
  vertical-align: top;
  width: 1em;
  height: 1em;
  margin-left: 0.25em;
  margin-right: 1px;
  background-image: none;
  background-repeat: no-repeat;
  background-size: contain;
}

a[href*="//"]::after {
  content: "";
  background-image: url("/assets/external.png");
}

nav > ul {
  padding: 0;
  list-style-type: none;
}

nav > ul li {
  display: inline-block;
  list-style-type: none;
  margin-right: 0.5em;
}

nav > ul li:last-child {
  margin-right: 0;
}

nav > ul li a {
  display: block;
  padding: 0.5em;
  height: 3em;
  border: solid 1px transparent;
  border-color: black;
  border-color: var(--fg);
}

nav > ul li a.here {
  border-color: blueviolet;
  border-color: var(--link-visited);
}

nav > ul li a span.dingbat {
  margin-right: 0.25em;
}

blockquote {
  margin-block: 1em;
  margin-inline: 0;
  border: solid 1px var(--fg);
  border-left-width: 8px;
  padding: 0em 0.5em;
}

table {
  margin-block: 1em;
  border-collapse: collapse;
  border: solid 1px transparent;
  border-color: black;
  border-color: var(--fg);
}

table thead {
  border-bottom: solid 1px transparent;
  border-bottom-color: black;
  border-bottom-color: var(--fg);
  background-color: #aaa;
  background-color: var(--table-head);
}

table th, table td {
  border: dotted 1px transparent;
  border-color: black;
  border-color: var(--fg);
  border-top: none;
  border-left: none;
  padding: 0.25em 0.5em;
}

table tr td:last-child, table tr th:last-child {
  border-right: none;
}

table tr:last-child td, table tr:last-child th {
  border-bottom: none;
}

table tbody tr:nth-child(2n) {
  background-color: #ddd;
  background-color: var(--table-even-row);
}

span.dingbat {
  color: black;
  color: var(--fg);
  font-size: 2em;
  vertical-align: middle;
}

:hover > span.dingbat {
  color: white;
  color: var(--link-highlight);
}
