/* Color Palettes -- */
:root {
    /* blue */
    --blue-clr-1: #4b00fa;
    --blue-clr-2: #3200af;
    --blue-clr-3: #6446fa;
    --blue-clr-4: #6446fa;
    --blue-clr-5: #afa0ff;
    /* green */
    --green-clr-1: #9bfa82;
    --green-clr-2: #28a04b;
    --green-clr-3: #37d764;
    --green-clr-4: #c8fab4;
    --green-clr-5: #e6fae6;
    /* cyan */
    --cyan-clr-1: #6ee6eb;
    --cyan-clr-2: #328cb4;
    --cyan-clr-3: #46bed7;
    --cyan-clr-4: #aaf0f5;
    --cyan-clr-5: #cdf5fa;
    /* purple */
    --purple-clr-1: #b4a5fa;
    --purple-clr-2: #695fa5;
    --purple-clr-3: #8c7ddc;
    --purple-clr-4: #c8c3fa;
    --purple-clr-5: #d7dcfa;
    /* orange */
    --orange-clr-1: #ffa56e;
    --orange-clr-2: #e6785a;
    --orange-clr-3: #be6450;
    --orange-clr-4: #fac3a5;
    --orange-clr-5: #fadcc8;
    /* black */
    --black-clr-1: #000000;
    --black-clr-2: #c2c2c2;
    --black-clr-3: #999999;
    --black-clr-4: #666666;
    --black-clr-5: #333333;
    /* pink */
    --pink-clr-1: #ffb5ff;
    --pink-clr-2: #c2c2c2;
    --pink-clr-3: #999999;
    --pink-clr-4: #666666;
    --pink-clr-5: #333333;
}

/** BORDER **/

.border-blue {
    border: 2px solid var(--blue-clr-1);
}
.border-green {
    border: 2px solid var(--green-clr-1);
}
.border-cyan {
    border: 2px solid var(--cyan-clr-1);
}
.border-purple {
    border: 2px solid var(--purple-clr-1);
}
.border-orange {
    border: 2px solid var(--orange-clr-1);
}
.border-black {
    border: 2px solid var(--black-clr-1);
}

/** COLOR **/
.txt-blue-1 {
    color: var(--blue-clr-1) !important;
}
.txt-blue-2 {
    color: var(--blue-clr-2) !important;
}
.txt-blue-3 {
    color: var(--blue-clr-3) !important;
}
.txt-blue-4 {
    color: var(--blue-clr-4) !important;
}
.txt-blue-5 {
    color: var(--blue-clr-5) !important;
}

.txt-green-1 {
    color: var(--green-clr-1) !important;
}
.txt-green-2 {
    color: var(--green-clr-2) !important;
}
.txt-green-3 {
    color: var(--green-clr-3) !important;
}
.txt-green-4 {
    color: var(--green-clr-4) !important;
}
.txt-green-5 {
    color: var(--green-clr-5) !important;
}

.txt-cyan-1 {
    color: var(--cyan-clr-1) !important;
}
.txt-cyan-2 {
    color: var(--cyan-clr-2) !important;
}
.txt-cyan-3 {
    color: var(--cyan-clr-3) !important;
}
.txt-cyan-4 {
    color: var(--cyan-clr-4) !important;
}
.txt-cyan-5 {
    color: var(--cyan-clr-5) !important;
}

.txt-purple-1 {
    color: var(--purple-clr-1) !important;
}
.txt-purple-2 {
    color: var(--purple-clr-2) !important;
}
.txt-purple-3 {
    color: var(--purple-clr-3) !important;
}
.txt-purple-4 {
    color: var(--purple-clr-4) !important;
}
.txt-purple-5 {
    color: var(--purple-clr-5) !important;
}

.txt-orange-1 {
    color: var(--orange-clr-1) !important;
}
.txt-orange-2 {
    color: var(--orange-clr-2) !important;
}
.txt-orange-3 {
    color: var(--orange-clr-3) !important;
}
.txt-orange-4 {
    color: var(--orange-clr-4) !important;
}
.txt-orange-5 {
    color: var(--orange-clr-5) !important;
}

.txt-black-1 {
    color: var(--black-clr-1) !important;
}
.txt-black-2 {
    color: var(--black-clr-2) !important;
}
.txt-black-3 {
    color: var(--black-clr-3) !important;
}
.txt-black-4 {
    color: var(--black-clr-4) !important;
}
.txt-black-5 {
    color: var(--black-clr-5) !important;
}

.txt-pink-1 {
    color: var(--pink-clr-1) !important;
}
.txt-pink-2 {
    color: var(--pink-clr-2) !important;
}
.txt-pink-3 {
    color: var(--pink-clr-3) !important;
}
.txt-pink-4 {
    color: var(--pink-clr-4) !important;
}
.txt-pink-5 {
    color: var(--pink-clr-5) !important;
}

/** BACKGROUND-COLOR **/
.bg-blue-1 {
    background-color: var(--blue-clr-1) !important;
}
.bg-blue-2 {
    background-color: var(--blue-clr-2) !important;
}
.bg-blue-3 {
    background-color: var(--blue-clr-3) !important;
}
.bg-blue-4 {
    background-color: var(--blue-clr-4) !important;
}
.bg-blue-5 {
    background-color: var(--blue-clr-5) !important;
}

.bg-green-1 {
    background-color: var(--green-clr-1) !important;
}
.bg-green-2 {
    background-color: var(--green-clr-2) !important;
}
.bg-green-3 {
    background-color: var(--green-clr-3) !important;
}
.bg-green-4 {
    background-color: var(--green-clr-4) !important;
}
.bg-green-5 {
    background-color: var(--green-clr-5) !important;
}

.bg-cyan-1 {
    background-color: var(--cyan-clr-1) !important;
}
.bg-cyan-2 {
    background-color: var(--cyan-clr-2) !important;
}
.bg-cyan-3 {
    background-color: var(--cyan-clr-3) !important;
}
.bg-cyan-4 {
    background-color: var(--cyan-clr-4) !important;
}
.bg-cyan-5 {
    background-color: var(--cyan-clr-5) !important;
}

.bg-purple-1 {
    background-color: var(--purple-clr-1) !important;
}
.bg-purple-2 {
    background-color: var(--purple-clr-2) !important;
}
.bg-purple-3 {
    background-color: var(--purple-clr-3) !important;
}
.bg-purple-4 {
    background-color: var(--purple-clr-4) !important;
}
.bg-purple-5 {
    background-color: var(--purple-clr-5) !important;
}

.bg-orange-1 {
    background-color: var(--orange-clr-1) !important;
}
.bg-orange-2 {
    background-color: var(--orange-clr-2) !important;
}
.bg-orange-3 {
    background-color: var(--orange-clr-3) !important;
}
.bg-orange-4 {
    background-color: var(--orange-clr-4) !important;
}
.bg-orange-5 {
    background-color: var(--orange-clr-5) !important;
}

.bg-black-1 {
    background-color: var(--black-clr-1) !important;
}
.bg-black-2 {
    background-color: var(--black-clr-2) !important;
}
.bg-black-3 {
    background-color: var(--black-clr-3) !important;
}
.bg-black-4 {
    background-color: var(--black-clr-4) !important;
}
.bg-black-5 {
    background-color: var(--black-clr-5) !important;
}

.bg-pink-1 {
    background-color: var(--pink-clr-1) !important;
}
.bg-pink-2 {
    background-color: var(--pink-clr-2) !important;
}
.bg-pink-3 {
    background-color: var(--pink-clr-3) !important;
}
.bg-pink-4 {
    background-color: var(--pink-clr-4) !important;
}
.bg-pink-5 {
    background-color: var(--pink-clr-5) !important;
}