@font-face {
    font-family: limelight;
    src: url(Limelight-Regular.ttf);
}

@font-face {
    font-family: ocra;
    src: url(OCRA.ttf);
}

body {
    background-color: #000;
    color: #FFF;
}

h1 {
    margin-top: 0;
    text-align: center;
    margin-bottom: 0;
    font-family: limelight, "sans serif";
}


#page {
    background-color: #222;
    color: #FFF;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: 1fr auto;
    gap: 2em;
}

#hdr { grid-column: 1 / span 2; grid-row: 1; }
#view-left { grid-column: 1; grid-row: 2; }
#view-right { grid-column: 2; grid-row: 2; }

header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.imgviewer {
    border-width: 1px;
    border-style: none;
    border-color: #888;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.up {
    color: #080;
    font-size: 2rem;
    text-align: center;
}

.up a {
    color: #080;
    text-decoration: none;
}

.down {
    font-size: 2rem;
    color: #C00;
    text-align: center;
}

.down a {
    color: #C00;
    text-decoration: none;
}

.nav {
    font-size: 2rem;
}
.nav a {
    color: #CC0;
    text-decoration: none;
}

.pic {
    border-color: #000;
    border-style: none;
    border-width: 1px;
    margin-left: auto;
    margin-right: auto;
    font-family: ocra;
}

.pic img {
    text-align: center;
    vertical-align: middle;
    max-width:  min(48vw, calc(100vh - 13rem));
    max-height: min(48vw, calc(100vh - 13rem));
}