:root {

    --primary-container-background: #202124;
    --primary-container-background50: #20212480;
    --primary-container-background30: #20212451;
    --primary-container-background20: #20212439;

    --primary-container-secondary: #303134;
    --primary-container-secondary50: #30313480;
    --primary-container-secondary30: #30313451;
    --primary-container-secondary20: #30313439;
    --primary-container-border: #404040;
    --primary-container-border50: #40404080;
    --primary-container-border30: #40404051;
    --primary-container-border20: #40404039;
    --primary-error-background: rgba(186, 26, 26, 0.769);

    --black: #000000;
    --white: #ffffff;
    --white50: #ffffff80;
    --white30: #ffffff51;
    --white20: #ffffff39;
    --orange: #ff9223;
    --red: var(--primary-error-background);
    --orange50: #ff922380;
    --orange30: #ff922351;
    --orange20: #ff922339;
    --green: #20cf20;
    --green50: #20cf2080;
    --green30: #20cf2051;
    --green20: #20cf2039;
    --yellow: #ffd317;
    --yellow50: #ffd31780;
    --yellow30: #ffd31751;
    --yellow20: #ffd31739;
    --yellowold: #FFE800;
    --yellowold50: #FFE80080;
    --yellowold30: #FFE80051;
    --yellowold20: #FFE80039;

    --blue: #1CD3F8;
    --brown: var(--primary-container-border);
    --brown-old: #404040;

}
.primary-container {
    color: var(--white);
    background-color: var(--primary-container-background);
}
.secondary-container {
    color: var(--white);
    background-color: var(--primary-container-border);
}
.error {
    color: var(--primary-container-white);
    background-color: var(--primary-error-background);
    border: 1px solid var(--primary-error-background);
}