:root {
  --bg: #1b1d1e;
  --fg: #b6babe;
  --dim: #7a7f84;
  --bright: #e8e8e8;
  --border: #3a3f44;
  --code-bg: #141617;
}

* { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.6 "Courier New", Courier, monospace;
  max-width: 84ch;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

a { color: var(--fg); text-decoration: underline; }
a:hover { background: var(--bright); color: var(--bg); text-decoration: none; }

h1, h2, h3, h4 { color: var(--bright); line-height: 1.3; }
h1.title { margin-bottom: 0.2rem; }

.banner {
  color: var(--bright);
  margin: 0 0 0.3rem;
  overflow-x: hidden;
  white-space: pre;
}

.meta { color: var(--dim); font-size: 0.9em; }

nav { margin-bottom: 0.5rem; }

hr { border: 0; border-top: 1px solid var(--border); margin: 1rem 0; }

pre {
  background: var(--code-bg);
  border: 1px solid var(--border);
  padding: 0.8rem;
  overflow-x: auto;
}

code {
  background: var(--code-bg);
  padding: 0 0.25em;
}

pre code { background: none; padding: 0; }

blockquote {
  border-left: 3px solid var(--border);
  margin-left: 0;
  padding-left: 1rem;
  color: var(--dim);
}

img { max-width: 100%; border: 1px solid var(--border); }

table { border-collapse: collapse; }
th, td { padding: 0.15rem 1.4rem 0.15rem 0; text-align: left; vertical-align: top; }
th { color: var(--dim); font-weight: normal; border-bottom: 1px solid var(--border); }

.index-list td:first-child { color: var(--dim); white-space: nowrap; }

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