@media (prefers-color-scheme: light) {
    :root {
        --color-back: #fff;
        --color-back_second: #f0f0f0;
        --color-front: #222222;
        --invert: invert(0);

        --nav_gradient: linear-gradient(#efefef, #fafafa);
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-back: #202020;
        --color-back_second: #383838;
        --color-front: #eee;
        --invert: invert(1);

        --nav_gradient: linear-gradient(#111111, #191B1A);
    }
}

:root {
    /* полупрозрачный цвет для текста */
    --color-50proc: color-mix(in srgb, var(--color-front) 50%, transparent);
    --color-25proc: color-mix(in srgb, var(--color-front) 25%, transparent);
    --color-blue: #478cd5;
    --color-green: #7ac44d;
    --color-amber: #dd9672;
    /* --color-red: #e03a3c; */
    --color-red: #db4144;

    --borderRadius: 8px;
    --left-right-offset: 80px;
}