:root {
  --std-font-family: helvetica, arial, sans-serif;
  --std-font-mono: monospace;
  --std-background: #fff;
  --std-background-active: #eee;
  --std-color: #333;
  --std-color-active: #444;
  --std-max-width: 40em;
  --std-link-color: #03c;
  --std-link-color-active: #03f;
  --std-link-decoration-color: #03c5;
  --std-link-transition: all .4s ease-in-out;
  --std-code-color: #009;
  --std-kbd-color: #060;

  --std-pre-background: #eee;
  --std-quote-background: #eee;
  --std-quote-border: #ccc;

  /* Invert for selection */
  --std-selection-background: var(--std-color);
  --std-selection-color : var(--std-background);
}

@media (prefers-color-scheme: dark) {
  :root {
    --std-background: #222;
    --std-background-active: #333;
    --std-color: #bbb;
    --std-color-active: #ccc;
    --std-link-color: #9bf;
    --std-link-color-active: #acf;
    --std-link-decoration-color: #9bf5;
    --std-code-color: #6cf;
    --std-kbd-color: #9c9;

    --std-pre-background: #111;
    --std-quote-background: #111;
    --std-quote-border: #444;
  }
}

::selection {
  background: var(--std-selection-background);
  color: var(--std-selection-color);
}

body {
  font-family: var(--std-font-family);
  background: var(--std-background);
  max-width: var(--std-max-width);
  line-height: 1.5;
  margin: 0 auto;
  padding: 0 1em;
}

h1, h2, h3, h4, h5, h6 {
  margin: 1em 0 0.5em 0;
  line-height: 1.2em;
}

a, a:link, a:visited {
  color: var(--std-link-color);
  text-decoration-color: var(--std-link-decoration-color);
  text-underline-offset: .25em;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: none;
  transition: var(--std-link-transition);
}

a:hover, a:active, a:focus {
  color: var(--std-link-color-active);
  text-decoration-color: var(--std-link-color-active);
}

body,
h1 a:link, h2 a:link, h3 a:link, h4 a:link, h5 a:link, h6 a:link,
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
  color: var(--std-color);
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,
h1 a:active, h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active,
h1 a:focus, h2 a:focus, h3 a:focus, h4 a:focus, h5 a:focus, h6 a:focus {
  color: var(--std-color-active);
}

img {
  max-width: 100%;
}

figure {
  margin: 1em 0;
  text-align: center;
}

figcaption {
  font-size: small;
}

pre, code, samp, kbd {
  color: var(--std-code-color);
  font-family: var(--std-font-mono), var(--std-font-mono);
  font-size: 0.9em;
}

pre code, pre samp, pre kbd {
  font-size: 1em;
}

pre kbd {
  color: var(--std-kbd-color);
}

pre {
  background: var(--std-pre-background);
  padding: 0.5em;
  overflow: auto;
}

blockquote {
  background: var(--std-quote-background);
  border-left: medium solid var(--std-quote-border);
  margin: 1em 0;
  padding: 0.5em;
}

blockquote :first-child {
  margin-top: 0;
}

blockquote :last-child {
  margin-bottom: 0;
}

hr {
  height: 1px;
  border: 0;
  background: var(--std-color);
}

p, nav, details, dl {
  margin: 0 0 1em 0;
}

hr {
  margin: 1em 0;
}

abbr {
  outline: none;
  cursor: inherit;
  text-underline-offset: .25em;
  text-decoration-thickness: 1px;
  text-decoration-style: dotted;
  text-decoration-skip-ink: none;
}

table {
  width: 100%;
}

thead tr {
  background-color: var(--std-background-active);
}

th {
  text-align: left;
}

th, td {
  padding: 1em;
}

tr:nth-child(even) {
  background-color: var(--std-background-active);
}