body { background-color: #000; }
h1, h2, button.filters { text-align: center; border: solid 1px; padding: 0.3em; font-family: Garamond, serif; font-weight: 400; }
nav ul { text-align: center; }
nav li { display: inline-block; margin-right: 2em; cursor: pointer; text-align: center; border: solid 1px; padding: 0.6em 1.2em; font-family: Garamond, serif; font-weight: 400; width: 6em; }
.readfic h3 { text-align: center; }
h1, h2, h3 { line-height: 1.3em; }
h1 { font-size: 2em; margin-bottom:0; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.5em; font-family: Garamond, serif; margin-top: 1.5em; font-weight: 400; }
figure { float: right; margin-right: 0; display: table; margin-top: 0; }
figcaption { padding-top: 0.5em; font-size: 0.8em; display: table-caption; caption-side: bottom; }
button.filters { width: 80%; font-size: 1.5em; cursor: pointer; }
li, .section p, .readfic p, figcaption { font-family: "Segoe UI", san-serif; }
.section p, .readfic p { line-height: 1.5em; }
.section li { margin-bottom: 0.5em; }
div.link { text-align: center; border: solid 1px; font-family: Garamond, serif; font-weight: 400; font-size: 16px; margin-bottom: 1em; }
div.link p { margin: 0.5em; line-height: 1.3em; }
div.link a, nav li a { text-decoration: none; display: inline-block; width: 100%; }
div.link a { height: 1.5em; }
.section { border: solid 1px; padding-left: 1rem; padding-right: 1rem; padding-bottom: 0.5rem; margin-bottom: 1rem; }
.readfic { border: 0; padding-left: 1em; padding-right: 1rem; padding-bottom: 0.5rem; margin-bottom: 1rem; margin-top: 1.5rem; }
.intro { padding-left: 1rem; padding-right: 1rem; margin-bottom: 1rem; margin-top: 0.5rem; }
.intro p { font-family: Garamond, serif; font-weight: 400; font-size: 1em; text-align: center; line-height: 0.5em; }
.recdate { float: right; margin-top: -3.2em; }
blockquote::before { content: "\201C"; font-family: 'Garamond', serif; font-weight: 400; font-size: 2em; 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 1px; border-color: #E3B505; height: 367px; background-position: center; background-image: url("banner.jpg"); }
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: 1280px; margin: auto; border: solid 1px; border-color: #E3B505; }
h1 { max-width: 49.6rem; }
h2 { max-width: 50rem; }
div.link, button.filters, .readfic { max-width: 51rem; }
.section { max-width: 49rem; }
h1, h2, button.filters, .section, .intro, div.link, .readfic { margin-left: auto; margin-right: auto; }

.video-23-5x1-half { position:  relative; height: 0; overflow: hidden; padding-bottom: 21.25%; width: 49%; }
.half1 { margin-bottom:-21.25%; }
.half2 { left:51% }
}
@media only screen and (orientation: portrait) {
.index, .read { width: 100%; padding-bottom: 0.5em; margin: 0; border: solid 0; }
h1, h2, button.filters, .section, .readfic, .intro, div.link { margin-left: 1em; margin-right: 1em; }
.read { padding-top: 0.5em; }
.video-23-5x1-half { position: relative; height: 0; overflow: hidden; margin-top: 1em; padding-bottom: 42.5%; }
}
@media only screen and (orientation: landscape) {
}

.index { border-color: #E3B505; background: floralwhite; }
.read { border-color: #E3B505; background: floralwhite; margin-top: 3.5em; }
h1, h2, button.filters, div.link { border-color: #E3B505; background: #E3B505; color: black; border-radius: 4px; }
h1 { margin-top: -1.5em; position: relative; z-index: 3; }
button.filters, div.link { border-color: #E3B505; background: floralwhite; color: #005f69; }
div.link a { color: darkblue; }
div.link:hover a, button.filters:hover { color: floralwhite; }
div.link:hover, button.filters:hover { background: midnightblue; }
.section { border-color: #E3B505; background: floralwhite; }