@media (prefers-color-scheme: light) {
  :root {
    --background-color: #f2f2f2;
    --softbox-color: #c2c2c2;
    --foreground-color: #222222;
    --link-color: blue;
    --link-vis-color: rebeccapurple;
    --emph-color: #116611;
    --green-color: #008000;
    --blue-color: #000080;
    --red-color: #800000;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #222222;
    --softbox-color: #333333;
    --foreground-color: #f2f2f2;
    --link-color: cyan;
    --link-vis-color: rebeccapurple;
    --emph-color: #99ff99;
    --green-color: #00ff00;
    --blue-color: cyan;
    --red-color: #ff0000;
  }
}

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

h2.homepage-header {
  font-size: medium;
  margin-bottom: 0;
}

ul.no-bullets {
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-indent: 2ch;
}

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

.softbox {
  background: var(--softbox-color);
  border-radius: 8px;
  margin: 1em;
  padding: 1em;
  width: fit-content;
}

.linkbox::before {
  content: "=> ";
}

.shellbox > *::before {
  content: "$ ";
}

.indent {
  margin-left: 1em;
}

.list {
  list-style-type: none;
}

.bold {
  font-weight: bold;
}

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

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

.bmtitle {
  font-weight: bold;
}

.bmtags {
  font-style: italic;
}

em {
  color: var(--emph-color);
  font-style: normal;
  font-weight: bold;
}

code {
  color: var(--emph-color);
}

table {
  border-spacing: 1em 0px;
}