@media (prefers-color-scheme: light) {
  :root {
    --background-color: #f2f2f2;
    --foreground-color: #222222;
    --link-color: blue;
    --link-vis-color: rebeccapurple;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #222222;
    --foreground-color: #f2f2f2;
    --link-color: cyan;
    --link-vis-color: violet;
  }
}

body {
  background: var(--background-color);
  color: var(--foreground-color);
  font-family: monospace;
  max-width: 40em;
}

.box {
  border-width: 1px;
  border-style: solid;
  border-color: var(--foreground-color);
  border-radius: 8px;
  margin: 1em;
  padding: 1em;
}

.indent {
  margin-left: 1px;
}

.bold {
  font-weight: bold;
}

.tooltip {
  text-decoration-line: underline;
  text-decoration-color: var(--foreground-color);
  text-decoration-style: dotted;
}

.tooltip:hover {
  cursor: default;
}

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

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