:root {
    --dark-background: #000;
    --dark-panel-background: #222;
    --dark-text: #ddd;
    --light-background: #fff;
    --light-panel-background: #eee;
    --light-text: #222;
    --dark-contrast: #FF9900;
    --light-contrast: #006600;
}

@font-face {
    font-family: "Monaspace Xenon";
    src: url('fonts/MonaspaceXenon-Regular.woff') format('woff');
}


a {
    color: var(--light-text);
    text-decoration: underline;
    text-decoration-color: var(--dark-contrast);
    text-decoration-thickness: 0.1rem;
    text-decoration-skip-ink: all;
}

body {
    background-color: var(--light-background);
    color: var(--light-text);
    font-family: "HelveticaNeue-Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 0.8rem;
    margin: 0;
    padding: 0;
}

button {
    background-color: var(--light-background);
}


h1, h2, h3, h4, h5, h6 {
    color: var(--light-contrast);
    font-family: "Gill Sans", "Gill Sans MT", "Gill Sans Nova", sans-serif;
    font-weight: normal;
    margin: 0;
    text-transform: uppercase;
}

h1 {
    margin: 0.5rem 0 1rem;
}

html {
    padding: 0; margin: 0;
}


ol, ul {
    list-style: none;
    padding: 0;
}

p {
    margin: 0;
}

table {
    background-color: var(--light-panel-background);
}

.body-wrapper {
    padding: 0.25rem 0.5rem;
}

.center {
    text-align: center;
}

.hidden {
    display: none;
}

.markup-panel {
    font-family: "Monaspace Xenon", "Consolas", "Inconsolata", "Courier New", monospace;
    white-space: pre-line;
    overflow-x: auto;

    em {
        font-style: normal;
    }

    em.it { font-style: italic; }
    em.sc { font-variant: small-caps; }
    em.asc { font-variant-caps: all-small-caps; }

    .sm { font-size: 0.75rem; }
    .lg { font-size: 1.25rem; }
}

.panel {
    padding: 0.5rem;
    border: 3px double var(--light-contrast);
    outline: 1px solid var(--light-contrast);
    background-color: var(--light-panel-background);

    > h3 {
        margin-bottom: 0.5rem;
    }
}


.book-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 1rem;
}

.book-grid:after
{
    content: '';
    flex-grow: 100;
}

.book-grid > div {
    width: 15rem;
    height: 15rem;
    overflow-x: hidden;
    text-align: center;
    border: solid 1px var(--light-contrast);
    background-color: var(--light-panel-background);
    padding: 0.5rem;
}

.edition-count {
    padding: 0 0.25rem;
    font-size: 0.7rem;
    margin-left: 0.5rem;
    background-color: var(--light-background);
}

.specifier {
    font-style: italic;
}

@media (prefers-color-scheme: dark) {
    a {
        color: var(--dark-text);
    }

    body {
        background-color: var(--dark-background);
        color: var(--dark-text);
    }

    button {
        background-color: var(--dark-background);
    }
    
    menu {
        background-color: var(--dark-contrast);
        color: var(--dark-text);

        a {
            color: var(--dark-text);
        }
    }

    h1, h2, h3, h4, h5, h6 { 
        color: var(--dark-contrast);
    }
    
    table {
        background-color: var(--dark-panel-background);
    }

    .book-grid > div {
        border: solid 1px var(--dark-contrast);
        background-color: var(--dark-panel-background);
    }

    .edition-count {
        background-color: var(--dark-background);
    }


    .panel {
        border-color: var(--dark-contrast);
        outline-color: var(--dark-contrast);
        background-color: var(--dark-panel-background);
    }
}