: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: grid;
    grid-template-columns: repeat(auto-fill, 9rem);
    grid-gap: 1rem;
    justify-content: space-between;

    .publication {
        height: 14rem;
        display: flex;


        img {
            object-fit: contain;
            width: 8rem;
            height: 10rem;
        }

        svg {
            object-fit: contain;
            width: 6rem;
            height: 10rem;
            stroke: #DDD;
            padding: 0 2rem;
        }
    }
}

.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);
    }

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


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