:root {--min-content-size:500px;--max-content-size:795px}
* {box-sizing:border-box}
html {background-repeat:repeat;font-size:16px;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAD5JREFUWIXt1rEJADAQw0A5++/sDOFAGrkXHF99SsuwkCXnTPWDCRAgQIAAAQICTP9At/z/BQQIECBAgAABF+gTBjtt6dKoAAAAAElFTkSuQmCC")}
header svg {display:block;float:left;width:64px;height:64px}
header svg rect {width:1px;height:1px}
body {font-family:sans-serif;background-color:white;min-width:var(--min-content-size);margin:0;padding:10px;min-height:100vh;height:100%}
header,main,footer {display:block;max-width:var(--max-content-size)}
header,main,footer {margin:0 auto}

nav {display:inline-block;min-height:64px}
nav ul,nav ol {list-style:none;display:inline-block;margin-top:0;margin-bottom:0;padding:0 20px 0 20px;vertical-align:top;text-transform:lowercase}
nav ul:first-child {padding-left:20px}
nav .selected,nav .self {font-style:italic}

table {margin-left:1px}
table,th,td {border:2px solid;border-collapse:collapse}
th,td {padding-left:.5em;padding-right:.5em;text-align:center}
pre {margin-left:auto;margin-right:auto}
a,a:visited {color:black;text-decoration:underline solid}
a[target="_blank"]::after {content:"\2197"}
quote {display:block;text-align:center}

main img {width:100%;min-width:var(--min-content-size);max-width:var(--max-content-size)}
main p img {margin-top:1em}

details {margin-top:5px;margin-bottom:5px}
details:open > summary {margin-bottom:5px}

div.codeview {max-width:450px;background:white;border:1px solid black}
div.codeview pre {padding:8px;margin:0;font-family:monospace,monospace;font-size:14px;text-wrap:balance}
div.codeview div.command {margin-top:0;background:black;color:white;padding:8px 8px;font-size:12px;border-top:1px solid black}
div.codeview div.command code:first-child::before {content:"$ ";font-weight:bold}
div.codeview div.command code a {color:white;font-weight:bold;float:right}
div.codeview div.command code a::before {content:"("}
div.codeview div.command code a::after {content:")"}

footer {display:block;text-align:center}
footer hr {border-radius:5px;border:1px solid black;max-width:var(--max-content-size)}

@media (prefers-color-scheme: dark) {
  * {color:white}
  body {background:black}
  a,a:visited {color:white;text-decoration:underline solid}
  div.codeview {width:500px;background:darkgray}
  div.codeview pre {color:black}
}

@media print {
  header,body,footer {margin:0}
  div.codeview pre a {float:initial}
}

@media (max-device-width: 594px) {
  header,body,footer {margin:0}
}