/* Styles inspired by elementary OS's Pantheon desktop, & Solarized. */

:root {
    --silver100: #fafafa;
    --silver300: #d4d4d4;
    --silver500: #abacae;
    --silver700: #7e8087;
    --silver900: #555761;

    --black100: #666;
    --black300: #4d4d4d;
    --black500: #333;
    --black700: #1a1a1a;
    --black900: #000;
}
body {font-family: sans-serif;}
body.fill {padding: 0; margin: 0;}
body.fill > :only-child {height: 100%}

header, footer, main {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 2px;
}
header {background: var(--silver500); border-bottom: thin solid black;}
footer {border-top: thin solid var(--silver500)}
main {align-items: stretch; padding: 0}
main > :not(iframe) {padding: 2px}
header > hr, footer > hr {
    border: none;
    flex-grow: 1;
}
main > *:not(aside) {flex-grow: 2}
main > aside {background: var(--silver300); flex-grow: 1; min-width: 100px;}
iframe {width: 100%; border: none;}

/* --- */

blockquote { /* Only being used for code..., though appropriate I'm quoting that code from the download. */
    background: #fdf6e3; color: #586e75; padding: 5px; margin: 0; font: monospace;
    voice-family: inherit;
}
.tok-symbol {color: #586e75; speak-as: spell-out literal-punctuation; pause: none; rest: none;}
.tok-qualify {color: #cb4b16; voice-stress: strong voice-volume: soft;}
.tok-keyword {color: #6c71c4; voice-stress: reduced}
.tok-ident {color: #dc322f; voice-stress: strong;}
.tok-string {color: #859900; voice-pitch: high;}
.tok-comment {color: #839496; voice-volume: soft;}

@media (prefers-color-scheme: dark) {
    body {
        background: var(--black700);
        color: var(--silver300);
    }
    main > aside, header {background: var(--black500)}
    blockquote {background: #002b36; color: #93a1a1}
    .tok-symbol {color: #93a1a1}
}

/* --- */

.silent {speak: never}
dl > dt {font-weight: bold; text-align: center;}
dl > dd {margin: 0;}
.disclosure {float: right}