/* ========== THEME ========== */
body {
    --text-color: #262626;
    --text-color2: #3d3d3d;
    --text-good: #0CF500;
    --text-bad: #F5000C;

    --brand-bg: #B3C0D1;
    --brand-text: #0146f4;

    --bg-color: #FEFEFE;
    --bg-selected: #F1F1F1;
    --bg-element: #a7a7a7;
    --bg-action: #81a7ff;
    --bg-danger: #ff6464;
}

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

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

        --bg-color: #2d2c33;
        --bg-selected: #424248;
        --bg-element: #626268;
        --bg-action: #3a58af;
        --bg-danger: #ac1e1e;
    }
}

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

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

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

#content {
    margin: 0.5em;
}

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

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

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