/* ========== THEME ========== */
body {
    --text-color: #262626;
    --text-color2: #3d3d3d;
    --text-good: green;
    --text-bad: red;

    --brand-bg: #EDF3FE;
    --brand-text: #5488F7;

    --bg-color: #FEFEFE;
    --bg-selected: #F1F1F1;
    --bg-element: #a7a7a7;
    --bg-action: #5181fe;
}

@media (prefers-color-scheme: dark) {
    /* defaults to dark theme */
    body {
        --text-color: #eee;
        --text-color2: #bbb;
        --text-good: greenyellow;
        --text-bad: orangered;

        --brand-bg: #393E50;
        --brand-text: #5F93F3;

        --bg-color: #2d2c33;
        --bg-selected: #424248;
        --bg-element: #626268;
        --bg-action: #4a70d5;
    }
}

* {
    background: transparent;
    color: var(--text-color);
}

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    background: var(--bg-color);
    margin: 0; /* браузеры зачем-то ставят свое значение */
}

#content {
    margin: 0.5em;
}

/* ========== MAIN STYLES ========== */

header > h1 {
    text-align: center;
    background-color: var(--brand-bg);
    padding: 0.5em;
    margin: 0;
}

header * {
    color: var(--brand-text);
}

header > nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

header > nav > a {
    margin: 0.5em;
}

.value-good {
    color: var(--text-good);
}

.value-bad {
    color: var(--text-bad);
}