/* COLORS */
html {
    --color-white: #ffffff;
    --color-light-gray: #d7d7d7;
    --color-white-gray: #f0f0f0;
    --color-dark-gray: #666666;
    --color-gray: #cccccc;
    --color-black: #000000;
    --color-blue: #2b32c7;
    --color-soft-blue: #ced9fb;
    --color-light-blue: #dfe7ff;
    --color-mint-blue: #c3e5e7;
    --color-cyan: #a9d5d8;
    --color-teal: #25a1a9;
    --color-golden-orange: #ffb93e;
    --color-flame-orange: #fe670c;
    --color-orange: #ff7c2d;
    --color-red: #ff0000;
    --color-dark-red: #c52202;
    --color-lilac: #e8daf7;
    --color-purple: #9c65d8;
    --color-lavender: #b8c5f6;
}
/* BG COLORS */
.bg-white {
    background-color: var(--color-white);
}
.bg-blue {
    background-color: var(--color-blue);
}
.bg-mint-blue {
    background-color: var(--color-mint-blue);
}
.bg-teal {
    background-color: var(--color-teal);
}
.bg-cyan {
    background-color: var(--color-cyan);
}
.bg-orange {
    background-color: var(--color-orange);
}
.bg-golden-orange {
    background-color: var(--color-golden-orange);
}
.bg-flame-orange {
    background-color: var(--color-flame-orange);
}
.bg-light-blue {
    background-color: var(--color-light-blue);
}
.bg-soft-blue {
    background-color: var(--color-soft-blue);
}
.bg-lavender {
    background-color: var(--color-lavender);
}
.bg-lilac {
    background-color: var(--color-lilac);
}
.bg-mint-blue {
    background-color: var(--color-mint-blue);
}
.bg-purple {
    background-color: var(--color-purple);
}
.bg-red {
    background-color: var(--color-red);
}
.bg-dark-red {
    background-color: var(--color-dark-red);
}
body, .bg-white-gray {
    background-color: var(--color-white-gray);
}
/* TEXT COLORS */
.color-white {
    color: var(--color-white);
}
.color-white-gray {
    color: var(--color-white-gray);
}
.color-dark-gray {
    color: var(--color-dark-gray);
}
body, .color-black {
    color: var(--color-black);
}
.color-blue {
    color: var(--color-blue);
}
.color-soft-blue {
    color: var(--color-soft-blue);
}
.color-red {
    color: var(--color-red);
}
.color-flame-orange {
    color: var(--color-flame-orange);
}
.color-golden-orange {
    color: var(--color-golden-orange);
}
.color-light-gray {
    color: var(--color-light-gray);
}
.color-light-blue {
    color: var(--color-light-blue);
}
/* OVERLAYS */
.overlay {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg,rgba(43, 50, 199, 1) 0%, rgba(255, 255, 255, 0) 60%);
    pointer-events: none;
}