/* aesthetics */
body { font-size: 1.2em; width: min(40em, 90%); margin: 0 auto; }
h1 { font-size: 1.5em; text-align: center; }
h2 { font-size: 1.2em; }
h3 { font-size: 1em; }
h1, h2, h3 { font-family: sans-serif; }
blockquote { padding: 0 1em; border-left: 1px solid grey; }
p > img { display: block; margin: 0 auto; max-width: 100%; }
pre { border: 1px solid grey; padding: 1em; overflow: auto; }
td, th { border: 1px solid black; padding: 0.3em; }
/* header */
.subtitle { font-style: italic; text-align: center; }
.hlinks { text-align: center; }
/* toggleable spoilers */
input:not(:checked) + .spoiler { background-color: black; }
/* show target fragment */
:has(> a:target) { background-color: yellow; }
/* omit things for printing */
@media print { footer, h2 > a:first-of-type, h3 > a:first-of-type, .hlinks { display: none; }  }
/* dark theme */
@media (prefers-color-scheme: dark) {
    body, input[type="text"] { background-color: black; color: white; }
    input[type="text"]::placeholder { color: silver; }
    button { background-color: navy; color: white; }
    a:not(:visited) { color: cyan; }
    a:visited { color: fuchsia; }
    td, th { border: 1px solid white; }
    :has(> a:target) { background-color: navy; }
}