@media screen and (prefers-color-scheme: dark) {
    html{
        color: white;
        background-color: #1a1a1a;
    }

    button {
        background-color: #222;
        color: white;
    }

    select, input, textarea {
        background-color: #222;
        color: white;
    }
}

body {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}

#sheet {
    margin: 1em;
}

#sheet header {
    display: flex;
    align-items: baseline;
}

#sheet header h1 {
    font: optional;
    margin-right: 2em;
}

#sheet header h2 {
    font: optional;
    font-size: 1.2em;
    margin-right: 1em;
}

.ast_score {
    font-size: 2em;
    font-weight: bold;
    text-align: center;
}

.ast_mod td {
    text-align: center;
    font-size: 1.2em;
    padding-right: 1em;
}

.ast_skills {
    vertical-align: top;
}

#spells {
    margin: 0.5em 0;
    column-width: 250px;
    column-gap: 0.3em;
}

.spell-level {
    margin: 0.3em 0.3em;
    break-inside: avoid; /* to avoid breaking content across columns */
    background-color: #eee;
}

@media screen and (prefers-color-scheme: dark) {
    .spell-level {
        background-color: #292727;
    }
}

#spells .spell-level:first-child,
#spells .spell-level:first-child h2 {
    margin-top: 0;
}

.spell-level h2 {
    font-size: 1.1em;
    font-weight: bold;
    font-family: monospace;
    margin: 0.8em 0 0.3em;
}

.spell {
    margin: 0.3em 0.3em;
}

.spell-name {
    font-weight: bold;
}

.spell-data {
    font-size: 0.9em;
}

#export button {
    margin: 0.3em;
}

@media print {
    #export {
        display: none;
    }

    #import {
        display: none;
    }
}