h1, h2, button.filters { text-align: center; border: solid 3px; border-radius: 9px; padding: 0.5em; font-family: 'Press Start 2P', san-serif; font-weight: 400; }
.readfic h3 { text-align: center; }
h1, h2, h3 { line-height: 1.3em; }
h1 { font-size: 24px; }
h2 { font-size: 16px; }
h3 { font-size: 16px; margin-top: 1.5em; }
button.filters { width: 80%; font-size: 16px; cursor: pointer; }
h3, li, .section p, .readfic p { font-family: Verdana, san-serif; }
.section p, .readfic p { font-family: Verdana, san-serif; line-height: 1.3em; }
div.link { text-align: center; border: solid 3px; border-radius: 9px; font-family: 'Press Start 2P', san-serif; font-weight: 400; font-size: 16px; margin-bottom: 1em; }
div.link p { margin: 0.5em; line-height: 1.3em; }
div.link a { text-decoration: none; }
.section { border: solid 3px; border-radius: 9px; padding-left: 1em; padding-right: 1em; padding-bottom: 0.5em; margin-bottom: 1em; }
.readfic { border: 0; padding-left: 1em; padding-right: 1em; padding-bottom: 0.5em; margin-bottom: 1em; margin-top: 1.5em; }
.intro { padding-left: 1em; padding-right: 1em; margin-bottom: 1em; margin-top: 0.5em; }
.intro p { font-family: 'Press Start 2P', san-serif; font-weight: 400; font-size: 8px; text-align: center; }
.canon { text-align: right; margin-top: -2.2em; }
blockquote::before { content: "\201C"; font-family: 'Press Start 2P', san-serif; font-weight: 400; font-size: 24px; margin-left: -1.5em; top: 1.5em; position: relative; }
blockquote { margin-top: -2em; padding-right: 2em; }
div.filters { display: none; margin-top: 0.8em; }
div.filters ul { padding-left: 0; }
div.filters ul li { display: inline; padding-right: 1em; }
img.right { float: right; margin-left: 1em; margin-bottom: 1em; }
div.hero { overflow: hidden; text-align: center; border-bottom: solid 3px; border-radius: 9px 9px 0 0; }
div.hero img { position: relative; left: -12.5%; }
hr { border: solid black 1px; width: 20%; }
.video-16x9 { position: relative; height: 0; overflow: hidden; margin-top: 1em; padding-bottom: 56.25%; }
.video-23-5x1 { position: relative; height: 0; overflow: hidden; margin-top: 1em; padding-bottom: 42.5%; }
.vid iframe, .vid object, .vid embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

@media only screen and (orientation: landscape) {
.index, .read { max-width: 50em; margin: auto; border: solid 3px; border-radius: 9px; }
h1, h2, button.filters, .section, .readfic, .intro, div.link { margin-left: 10%; margin-right: 10%; }
}
@media only screen and (orientation: portrait) {
.index, .read { width: 100%; padding-top: 0.5em; padding-bottom: 0.5em; margin: 0; border: solid 0; }
h1, h2, button.filters, .section, .readfic, .intro, div.link { margin-left: 1em; margin-right: 1em; }
}