/* these incantations make it full screen on everything,
 * and should not be touched carelessly.
 * it actually doesn't quite work on iOS because of the bottom toolbar that slides in and out there,
 * but fiddling is likely to make it worse, not better
 */
html, body {
    margin: 0;
    padding: 0;
}
body {
    background: black;
    height: 100vh;
    font-family: 'Droid Sans', sans-serif;
}

@font-face {
    font-family: 'Droid Sans';
    /* src is specified as a stylesheet link in the html (tested, works) */
    /* src: url("https://fonts.googleapis.com/css?family=Droid+Sans&subset=latin"); */
    font-display: swap;
}

/* top-level container including keeping the image container constrained */
#topContainer {
    overflow: auto scroll;
    height: 100%;
    display: flex;
    flex-direction: column;
}


/* pin identical-height bars to the top and bottom of the screen,
 * calling them 'header' and 'footer' for semantic accuracy.
 * below, we'll give them a blur effect if possible.
 */
header, footer {
    display: flex;
    position: fixed;
    width: 100%;
    background: rgba(185, 185, 185, 0.7);
    border: 0;
    flex-wrap: wrap;
}
header h1, footer h1 {
    flex: 1 1 auto;
    text-align: center;
    line-height: 1em;
    padding: 0 0.3em;
}
header {
    top: 0;
}
footer {
    bottom: 0;
}

@media screen and (max-width: 900px) {
    header h1 :link, footer h1 :link {
        line-height: 1em;
    }
    /* graceful vertical separators, one pixel off >:| */
    header h1, footer h1 {
        border-right: 1px solid black;
        margin-right: -1px;
    }
}

/* if we can use a snazzy Aero-style blur, do.
 * this is enabled in Chrome but not Firefox or Safari at the moment
 * (16-Jun-2020)
 */
@supports(backdrop-filter: blur(5px)) {
    header, footer {
        backdrop-filter: blur(5px);
        background: rgba(185, 185, 185, 0.4);
    }
}

#imageContainer {
    flex: 1;
    min-height: 0;
    background-color: #59708f; /* custom to match the image */
}
    
/* just putting it out there: I'm not thrilled with how <picture><source/><img/></picture> works
 * as the actual img tag is the bit where you need to set image styling attributes,
 * not the picture, and that seems unintuitive. the sources seem to be treated as overrides for img.src.
 * but hey, this works pretty flawlessly, so what matter if it's a little unintuitive under the hood?
 */
#focusImage img {
    object-fit: cover;
    object-position: top center;
    width: 100%;
    min-height: 100%;
    display: block;
}

a {
    text-decoration: none;
}
a:link {
    color: #000;
}
a:visited {
    color: #555;
}
.hide {
    display: none;
    visibility: hidden;
}