:root {
    --bg: light-dark(beige, #224);
    --item-bg: light-dark(white, black);
    --fg: light-dark(black, white);
    --border: 1pt solid var(--fg);
    font-family: "FreeSerif", times, serif;
    color: var(--fg);
    background: var(--bg);
}

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

h1 {
    font-size: xxx-large;
    font-weight: normal;
}

h2 {
    font-size: xx-large;
    font-weight: normal;
}

a {
    color: var(--fg);
}

details[open] {
    max-width: 32em;
    padding: 10pt;
}

details p, details ul {
    text-align: justify;
}

/* Available soon in Firefox
details[open]::details-content {
}
*/

article, details[open] {
    border: var(--border);
    display: inline-block;
    margin: 5pt;
    background-color: var(--item-bg);
}

article img {
    max-width: 100%;
    @media (prefers-color-scheme: dark) {
        filter: invert(1);
    }
}

article p {
    margin-top: 0;
}

footer {
    font-style: italic;
}

/* Custom player style */
midi-player {
    color: var(--fg);
    background-color: var(--item-bg);
    height: 2em;
    margin-top: 0;
    font-family: inherit;
    display: block;
    width: inherit;
}

midi-player::part(control-panel) {
    color: var(--fg);
    background-color: var(--item-bg);
    border: none;
}

midi-player::part(play-button) {
    height: 100%;
    aspect-ratio: 1;
    color: var(--fg);
}

@media print {
    @page {
        size: a5 portrait;
        margin: 0;
    }
    :root {
        color: black;
        background-color: white;
    }
    details, article p, midi-player, footer {
        display: none;
    }
    article, article a, article img {
        margin: 0;
        width: 147mm; /*148.5mm;*/
        border: none;
    }
    h1, h2 {
        break-after: page;
        padding-top: 8cm;
    }
    article {
        break-after: page;
    }
}