:root {
  --black: #202020;
  --gray: #505050;
  --white: #f0f0f0;
  --red: #ff9696;
  --blue: #9696ff;
  --green: #96e696;
}

* {
  word-wrap: break-word;
}

html, body {
  background-color: var(--black);
  color: var(--white);
}

/* Serif font */
main, .serif {
  font-family: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
}

/* Monospace font */
header, footer, code, pre, .monospace {
  font-family: Menlo, Consolas, Monaco, Adwaita Mono, Liberation Mono, Lucida Console, monospace;
}

main {
  font-size: 120%;
  max-width: 50rem;
  margin-left: auto;
  margin-right: auto;
}

header {
  text-align: center;
}

a {
  color: var(--white);
  text-decoration-color: var(--blue);
  text-decoration-thickness: 0.3rem;
}

a[href^="/download/"] {
  text-decoration-color: var(--green);
}

a[href^="/download/"]::before {
  content: "\27f1";
}

a[href^="http"] {
  text-decoration-color: var(--red);
}

a[href^="http"]::before {
  content: "\21f1";
}

#license a {
  text-decoration-color: initial;
  text-decoration-thickness: initial;
}

#license a::before {
  content: initial;
}

code {
  border: calc(max(0.1rem, 1px)) solid var(--white);
}

pre {
  border: calc(max(0.2rem, 1px)) solid var(--white);
}

code, pre {
  white-space: -moz-pre-wrap;
  white-space: pre-wrap;
  font-family: monospace;
  opacity: 0.9;
}

pre {
  padding: 0.5rem;
}

table, table td, table th {
  background-color: rgb(50, 50, 50);
  border-color: rgb(100, 100, 100);
  border-style: solid;
  border-width: 0.3mm;

  border-collapse: collapse;
}

table td, table th {
  padding: 0.5rem;
}

li li {
  margin-left: -1.5rem;
}

img {
  max-width: 100%;
}

details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}
details > summary > h2 {
  decoration-line: underline;
  text-decoration-line: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 0.3rem;
}
details:not(*[open]) > summary > h2 {
  decoration-style: dashed;
  text-decoration-style: dashed;
}

#header-main {
  width: 100%;
  border-bottom: 0.3rem solid var(--white);
  padding-bottom: 0.5rem;
  padding-right: 0.5rem;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: 150%;
}

#header-title {
  width: 100%;
  max-width: 50rem;
  text-align: left;
  font-weight: bold;
  font-size: 200%;
  margin-right: auto;
  margin-left: auto;
}

#logo {
  height: 3rem;
  vertical-align: middle;
}