* { font-family:sans-serif; color:#feb }

html {
    background-color: #00011c;
    background-image: url('paper.png');
}

body { margin: 2em }
main { margin:0 auto; max-width:44em }

header { margin-top:2em; margin-bottom:3em }
header img { display:block; width:20em; image-rendering:pixelated; margin:0 auto }
header h1 { text-align:center; font-family:serif; margin:0 }

h2 { border-top:2px solid #feb; padding-top:0.4em; margin-bottom:0; margin-top:2em }
h3 { margin-top:1.5em; margin-bottom:0.5em }
p { margin:0.8em 0 0.8em 0 }

blockquote, details p { color:#cca; font-style:italic; margin:1em 2.5em }
blockquote:before { content:"“" }
blockquote:after { content:"”" }
details summary { cursor:pointer; margin:0.8em 0 0.8em 0 }

img { max-width:90%; border-radius:4px; margin:1em auto; display:block }
audio { width:100% }
.indented { margin-left:2.5em }

@media (max-width:40em) {
    header img { width:15em } body { margin:1em }
}