@media (prefers-color-scheme: light) {
    :root {
        --white: #ffffffba;
        --red: #f32f2fba;
        --orange: #ff9933ba; /*#ff8c005c;*/
        --yellowpipi: #ffff99ba;
        --blue: #00ffffba;
        --green: #33ff33ba;
        --greensapin: #a4ffc7db;
        --violet: #9191ffbb;
        --darkblue: #518bffbb;
        --lightblue: #7dffffbd;
        --applegreen: #a0ffa0b2;
        --lightpink: #ff8197cc;
        --yellow: #ffda0094;
        --deepviolet: #cd1aff94;
        --salmon: #fa8072db;
        --lightorange: #ffa500b0;

        --pink: #ff56b09d;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --white: #82838b;
        --red: #7e2f33;
        --orange: #95581e; /*#ff8c004d; #ff8c005c;*/
        --yellowpipi: #897f3f;
        --blue: #1f6d8b;
        --green: #337839;
        --greensapin: #00ffa75c;
        --violet: #664f86;
        --darkblue: #455d9b;
        --lightblue: #3afffb66;
        --deepviolet: #cd1aff73;
        --applegreen: #7fcd326e;

        --salmon: #b1655f;
        --lightpink: #8a5660;
        --lightorange: #976c20;
        --pink: #ff56b159;
        --yellow: #8d7e21;


        /* 		--white: #ffffff4d;
                --red:#ff000040;
                --orange: #ff7f0078;
                --yellowpipi:#fade416e;
                --blue:#00beff66;
                --green:#32cd326e;
                --greensapin:#00ffa75c;
                --violet:#b576ff63;
                --darkblue:#5378d7a3;
                --lightblue: #3afffb66;
                --deepviolet: #cd1aff73;
                --applegreen:#7fcd326e;

                --salmon: #fa8072a1;
                --lightpink: #ff81976b;
                --lightorange: #ffa5007a;
                --pink:#ff56b159;
                --yellow:#ffda006e; */
    }
}


/* Events color */
.white {
    background-color: var(--white);
}

.red {
    background-color: var(--red);
}

.orange {
    background-color: var(--orange);
}

.yellow {
    background-color: var(--yellow);
}

.blue {
    background-color: var(--blue);
}

.green {
    background-color: var(--green);
}

.pink {
    background-color: var(--pink);
}

.yellowpipi {
    background-color: var(--yellowpipi);
}

.greensapin {
    background-color: var(--greensapin);
}

.violet {
    background-color: var(--violet);
}

.applegreen {
    background-color: var(--applegreen);
}

.lightblue {
    background-color: var(--lightblue);
}

.darkblue {
    background-color: var(--darkblue);
}

.deepviolet {
    background-color: var(--deepviolet);
}

.lightpink {
    background-color: var(--lightpink);
}

.lightorange {
    background-color: var(--lightorange);
}

.salmon {
    background-color: var(--salmon);
}