body { width: 100vw; margin: 0; font-family: sans-serif; } img, video { max-width: 100%; max-height: 90vh; display: block; margin-left: auto; margin-right: auto; } iframe { width: 100%; height: 90vh; } a { color: #888; text-decoration: none; } dl { overflow: hidden; } dt { float:left; width: 3em; height: 2em; margin-left: 2em; clear:both; } dd { float:left; } nav { background: #000; color: #fff; padding: 0.75em 0 1em 0; height: 2.5em; } nav #logo { display: inline; font-size: 2em; padding-left: 0.25em; padding-top: 0; padding-right: 1em; height: 1.25em; vertical-align: top; margin: 0 1vw; } nav .current { color: #fff; } nav a { display: inline; padding-right: 1em; position: relative; vertical-align: bottom; } nav .fa-bars { display:none; } nav a:hover { color: #fff; } @media screen and (max-width: 600px) { nav { display: inline-block; width: 100%; height: 100%; } nav #logo { display: inline; } nav .item { background: #000; display: none; padding: 0.1em 0.5em; } nav .fa-bars { float: right; display:inline; font-size: 2em; padding-top: 0.25em; padding-right: 0.75em; } } #image { padding-top: 2.5%; padding-bottom: 1%; } #controller { position: fixed; left: 0; bottom: 2.5%; width: 100%; text-align: center; padding: 0 } .controller-item { display: inline-block; cursor: pointer; width: 4em; } #prev, #next { cursor: pointer; position: absolute; color: lightgrey; font-weight: bold; font-size: 8em; transition: 0.5s ease; display: inline-block; bottom: 6vh; } #prev { left: 1%; } #next { right: 1%; } #prev:hover, #next:hover { text-decoration: none; } #prev:active, #next:active { color: black; } .post { padding: 1em; } /* bottom */ .pager { width: 100%; } .btn { white-space: nowrap; margin: 0.5em; text-decoration: none; color: #000; } .btn-left { margin: 1.5em; text-decoration: none; color: #000; float: left; display: inline-block; } .btn-right { margin: 1.5em; text-decoration: none; color: #000; float: right; display: inline-block; }