html {
  font-family: sans-serif;
  font-size: 12pt;
  color: #222;
}

body {
  overflow-wrap: anywhere;
  max-width: calc(100vw - 3em);
  width: 90ch;
  margin: 0 auto;
}

img[width="650"] {
  max-width: 85vw;
  max-height: 33vw;
}

pre,
code {
  font-family: TinyPragmataPro, monospace;
  font-size: 12pt;
}

p,
dd {
  /* text-align: justify; */
}

.indent {
  margin-left: 1em;
}

h1,
h2 {
  margin: 1.5em 0 1.5em 0;
}

h1 {
  font-size: 1.5em;
}

h2 {
  font-size: 19px;
}

h3 {
  font-size: 17px;
}

small code {
  font-size: 16px;
}

footer {
  margin-top: 12em;
  margin-bottom: 3em;
  font-size: 16px;
}

.logo {
  float: right;
}

pre {
  margin-left: 1em;
}

.keys {
  margin-left: 1em;
}

.keys th {
  text-align: left;
  padding-right: 1em;
  font-family: TinyPragmataPro, monospace;
}

.link {
  margin: .5em 1em;
}

dt {
  font-family: TinyPragmataPro, monospace;
  font-size: 16px;
  text-indent: -4em;
  margin-left: 4em
}

dd {
  margin-top: .5em;
  margin-bottom: 1em;
}

a.anchor {
  text-decoration: none;
  color: inherit;
}

.center {
  text-align: center;
}

.newpage {
  page-break-before: always;
}

.toc {
  width: 100%;
}

.toc td {
  vertical-align: top;
}

.toc td > p {
  margin-top: 0;
}

.toc td > ul {
  margin-bottom: 0;
}

pre {
  overflow: auto;
}

.num { color: #000000; } /* number */
.str { color: #67580c; } /* string */
.esc { color: #80216b; } /* escape sequence */
.ipl { color: #008080; } /* string interpolation */
.ppc { color: #685809; } /* preprocessor */
.pps { color: #273122; } /* preprocessor string */
.com { color: #0e6729; } /* multiline comment */
.slc { color: #0e6729; } /* single line comment */
.lin { color: #75715e; } /* wut */
.opt { color: #000000; } /* operator */
.kwa { color: #5332d8; } /* keyword */
.kwb { color: #8c1a94; } /* type */
.kwc { color: #6b2c75; } /* builtin */
.kwd { color: #9609a7; } /* constant */