html {
    --bg-color: black;
    --prime-ui-color: grey;
    background-color: var(--bg-color);
    color: var(--prime-ui-color);
    font-family: 'Briel Nib', Courier, monospace;
    font-size: x-large;

    --page-width: 800px;
    --page-height: 1000px;
}

body {
    margin: 0;
    text-align: center;
}

body.horizontal {
    display: grid;
    grid-template-columns: min-content min-content min-content;
}

header {
    text-align: start;
    padding: 0.2em 0.5em;
    margin: 0;
}

.horizontal header {
    width: max-content;
    position: relative;
}

.horizontal main {
    display: grid;
    grid-template-rows: 1fr;
    grid-auto-columns: min-content;
    grid-auto-flow: column;
}

p {
    margin: 0.3em auto;
}

h1 {
    font-family: "Briel Marker", Courier, monospace;
    font-size: 3em;
    font-weight: 100;
    color: white;
    text-align: center;

    margin: auto;
}

.horizontal h1 {
    position: absolute;
    width: var(--page-height);
    /* margin: 0; */
    text-align: right;
    left: -2.8em;
    top: 7.9em;
    rotate: -90deg;
}

.comic-display {
    display: grid;
    grid-template-columns: min-content min-content min-content;
    justify-content: center;
    padding: 0 0 5em;
    margin: 0;
    border-width: 0;
}

.comic-display.double, 
.comic-display.wide-as-screen {
    justify-content: left;
}

.horizontal .comic-display {
    padding: 0 max(0em, 50vw - 0.5 * var(--page-width));
    position: relative;
}

a {
    color: var(--prime-ui-color);
}

a:visited {
    color: var(--prime-ui-color);
}

.horizontal a.jump.next {
    position: absolute;
    right: 0;
}

.horizontal a.jump.prev {
    position: absolute;
    left: 0;
}

footer {
    padding: 0.2em 0.5em;
}

svg.ui {
    fill: var(--prime-ui-color);
}

footer .bar {
    text-align: left;
    margin-left: 0.8em;
}

footer .left-align {
    text-align: left;
    margin-left: 0.8em;
}

.horizontal footer .bar {
    text-align: right;
    margin-right: 0.8em;
}

button,
input,
select,
textarea {
    font-size: 100%;
}

form {
    text-align: start;
    margin: 1em;
    font-size: smaller;
}

button {
    color: var(--prime-ui-color); 
    background-color: var(--bg-color);
    border-width: 0.15em;
    border-color: var(--prime-ui-color);
    padding: 0.3em;
    font-family: "Briel Nib Bold", Courier, monospace;
    margin: 0.2em auto;
}

input[type="search"] {
    background-color: var(--bg-color);
    border-color: var(--prime-ui-color);
    font-family: "Courier New", Courier, monospace;
    color: var(--prime-ui-color);
    padding: 0.42rem 0.4rem 0.28rem;
    margin: 0.2em auto;
}

.search-check {
    padding: 0.2em;
    border: 0.1em solid var(--prime-ui-color);
    display: inline flex; 
    align-items: center;
    margin: 0.2em 0em;
}

.search-check.desc {
    width: 13em;
}

.search-check.exact {
    width: 9.5em;
}

.nav-button svg.ui {
    max-height: 2em;
}

footer .nav-line {
    text-align: center;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* margin: 0 auto; */
}

.nav-line .nav-button {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: larger;
    --nav-max-height: 1.5em;
    height: var(--nav-max-height);
}

.nav-line .nav-button:hover {
    border: 0.1em solid var(--prime-ui-color);
    margin: -0.1em;
}

.nav-line .nav-button svg.ui {
    max-height: calc(0.8 * var(--nav-max-height));
}

.nav-line .archive-button .button-text {
    margin: auto min(0.5em, 0.5vw);
}

.copyright {
    font-family: 'Briel Fixed Width', Courier, monospace;
    font-size: smaller;
    margin: 1em auto;
}