:root {
    --borderHeightS: 1px;
    --borderHeightM: 2px;
    --borderHeightL: 3px;
    --borderRadius: 3px;
    --borderStyle: solid;
    --opacityDown: 0;
    --opacityMiddle: .7;
    --opacityUp: 1;

    --opacityUpD: .8;

    --durationS: .2s;
    --durationM: .4s;
    --durationL: .6s;
    --durationXL: 10s;
    --course: ease-in-out;

    --primaryColor: #c9ab81;
    --secondaryColor: #827056;
    --red: #db0000;
    --green: #04bd28;
    --blue: #2442c4;
    --white: #ffffff;
    --gray: #eeeeee;
    --black: #000000;

    --primaryColorD: #8a785e;
    --secondaryColorD: #655846;
    --redD: #a70000;
    --greenD: #00811a;
    --blueD: #4962cf;
    --whiteD: #161616;
    --grayD: #313131;
    --blackD: #9e9e9e;
}

.red {
    color: var(--red) !important;
}

.green {
    color: var(--green) !important;
}

.black {
    color: var(--black) !important;
}

.blue {
    color: var(--blue) !important;
}

.primary {
    color: var(--primaryColor) !important;
}

.secondary {
    color: var(--secondaryColor) !important;
}

@media (prefers-color-scheme: dark) {
    .red {
        color: var(--redD) !important;
    }

    .green {
        color: var(--greenD) !important;
    }

    .black {
        color: var(--blackD) !important;
    }

    .blue {
        color: var(--blueD) !important;
    }

    .primary {
        color: var(--primaryColorD) !important;
    }

    .secondary {
        color: var(--secondaryColorD) !important;
    }
}