:root {
    --color-theme-base: var(--color-dark-blue);
    --color-theme-dark: var(--color-dark-blue--dark);
    --color-theme-text-positive: var(--color-dark-blue);
    --color-theme-text-negative: #fff;
    --font-family--primary: "Neo Sans Std", "neo-sans", Arial, sans-serif;
}

html {
    --header-multiplier: 0; /* 0 <= --header-multiplier <= 1 */
}

div.badge {
    background-color: var(--color-theme-dark);
}

.line {
    width: 23.75ex; /* number of characters in link title */
}

/* new elements specific to this page */

div.stackplots {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
div.stackplots > img {
    width: 110%;
}
a.stackplot > img {
    width: 100%;
}
div.stackplots h3 {
    text-align: center;
}
div.stackplots .subtitle {
    font-style: italic;
    font-size: var(--label-font-size);
    margin-top: var(--spacing--base);
}
span.blackletter {
    font-family: serif;
    font-size: var(--font-size--md);
    vertical-align: middle;
}
a.stackplot {
    margin-top: var(--spacing--lg);
    border-bottom: solid 4px transparent;
    text-align: center;
}
a.stackplot:nth-of-type(1) {
    margin-top: 0;
}
a.stackplot:hover, a.stackplot:active {
    border-bottom: solid 4px var(--color-theme-base);
    text-decoration: none;
}

/* single plot subpage formatting */

main#stackplot {
    display: flex;
    flex-direction: column;
    align-items: center;
}

nav#controls {
    display: grid;
    grid-template-columns: repeat(3, auto);
    column-gap: var(--grid-gutter);
    row-gap: var(--spacing--sm);
}

#image {
    max-width: min(100%, 100rem);
}

button svg {
    height: var(--link-list-icon-size);
    width: var(--link-list-icon-size);
}
button.btn.secondary {
    fill: var(--color-theme-text-positive);
    min-width: unset;
}
button.btn.secondary:active, button.btn.secondary:focus, button.btn.secondary:hover {
    fill: var(--color-theme-text-negative);
}

main#stackplot > p {
    font-size: var(--font-size--describer);
}

/* mobile overrides */

@media only screen and (max-width: 63.9375rem) {
    div.stackplots > img {
        display: none;
    }
}