:root {
    /* https://modernfontstacks.com/
       geometric humanist font */
    --font-system: Avenir, Montserrat, Corbel, source-sans-pro, sans-serif;
    /* monospace code font */
    --font-system-code: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
    --font-system-code-size: 0.8rem;

    --base-color: #FFCC4D;
    --base-color-tint-light: #ffdb82;
    --base-color-tint-lighter: #fff5db;
    --base-color-shade-dark: #b38f36;
    --base-color-shade-darker: #191408;

    --background-color-html: #969696;
    --background-color-html-shadow: #404040;
    --background-color: #fdfdfd;
    --background-color-mute: #f2f2f2;

    --text-color: black;
    --text-color-mute: hsl(0, 0%, 40%);

    --background-color-invert: var(--base-color-shade-darker);
    --text-color-invert: white;

    --link-color: black;

    --border-color: black;

    --code-text-color: var(--text-color);
    --code-text-color-bg: inherit;

    --panel-title-color: black;
    --panel-title-color-bg: var(--base-color-tint-lighter);

    --body-padding-lr: 5em;
    --body-padding-tb: 3em;

}

@media screen and (max-width: 600px) {
    :root {
        --body-padding-lr: 3em;
        --body-padding-tb: 3em;
    }
}
