html {
  color-scheme: dark light;
}

body {
  background: #141415;
  color: #cdcdcd;
  font-family: sans-serif;
  max-width: 44em;
  margin: 0 auto;
  padding: 10px;
}

a {
  color: #3291ff;
}

a:visited {
  color: #b83fff;
}

:target {
  background: #221;
}

code, kbd, pre, textarea {
  font-family: monospace, monospace;
  white-space: pre-wrap;
  border: 1px dotted;
  color: #ccc;
}

pre code {
  border: none;
}

code, kbd, pre, .flex div, .box, .chat-text, textarea {
  background: #222;
}

.box, .alert, .warning, .fixme, .FIXME {
  padding: 10px;
  margin: 10px 0;
}

.verse {
  white-space: pre-line;
  font-family: inherit;
}

pre, .flex div {
  padding: 5px;
  overflow: auto;
}

mark {
  background: #dc5;
}

summary {
  cursor: pointer;
  padding: 10px;
}

thead tr td, th, kbd, summary, .chat-nick {
  font-weight: bold;
}

thead tr td, th, summary, input {
  background: #333;
  color: #cdcdcd;
}

th, td, details, input {
  border: 1px solid #333;
}

input[type=button], input[type=submit] {
  cursor: pointer;
}

th, td {
  padding: 5px;
}

table, details *:not(summary) {
  border-collapse: collapse;
  margin: 10px 0;
}

.flex {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.flex div {
  display: flex;
  min-width: 12em;
  width: 100%;
  margin: 10px;
  flex: 1 1 0;
  flex-direction: column;
}

.flex div h3 {
  margin: 0;
}

.flex div p {
  flex: 1 1 0;
}

fieldset {
  border: 1px solid #999;
}

blockquote {
  border-left: 1px solid #333;
  padding-left: 5px;
}

img {
  max-width: 100%;
}

li p:nth-of-type(1) {
  display: inline;
}

.see-focus {
  position: absolute;
  background: #000;
  color: #fff !important;
  margin: 0 5px;
}

:not(:hover) > .see-focus:not(:focus):not(:active) {
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

.todo, .done {
  color: #ddd;
  padding: 0 .3em;
}

.todo {
  background: #a11;
}

.done {
  background: #162;
}

.alert, .warning, .fixme, .FIXME {
  background: #701111;
}

.fixme:before, .FIXME:before {
  content: "[FIXME] ";
  font-weight: bold;
  float: left;
}

.chat {
  margin: 10px 0;
  display: flex;
  align-items: center;
}

.chat-head {
  margin-right: 10px;
}

.chat-text {
  display: inline-block;
  padding: 10px;
}

@media (prefers-color-scheme: light) {
  body {
    background: white;
    color: #141415;
  }
  a {
    color: #00e;
  }
  a:visited {
    color: #551a8b;
  }
  :target {
    background: #ee8;
  }
  thead tr td, th, summary, input {
    background: #ccc;
    color: #141415;
  }
  th, td, details, input {
    border: 1px solid #ccc;
  }
  code, kbd, pre, textarea {
    color: #111;
  }
  code, kbd, pre, .flex div, .box, .chat-text, textarea {
    background: #ddd;
  }
  blockquote {
    border-left: 1px solid #ddd;
  }
  .alert, .warning, .fixme, .FIXME {
    background: #e53838;
  }
}

@media only print {
  nav, .toc:not([open]) {
    display: none;
  }
}