:root {
    --color-black: #000000;
    --color-white: #ffffff;
    --color-pink: #ce3390;
    --color-yellow: #ffdd00;
    --color-green-dk: #6ea338;
    --color-green-lt: #cadb2a;
    --color-red: #de2a3b;
    --color-purple: #933196;
    --color-blue-dk: #0061ae;
    --color-blue-lt: #0096d7;
    --color-orange: #dd7a08;
    --transition: .3s ease-in-out;
}

/*Background colors*/
.bg-color-000000 { background-color: var(--color-black);    transition: var(--transition); }
.bg-color-ffffff { background-color: var(--color-white);    transition: var(--transition); }
.bg-color-ce3390 { background-color: var(--color-pink);     transition: var(--transition); }
.bg-color-ffdd00 { background-color: var(--color-yellow);   transition: var(--transition); }
.bg-color-dd7a08 { background-color: var(--color-orange);   transition: var(--transition);}
.bg-color-6ea338 { background-color: var(--color-green-dk); transition: var(--transition); }
.bg-color-cadb2a { background-color: var(--color-green-lt); transition: var(--transition); }
.bg-color-de2a3b { background-color: var(--color-red);      transition: var(--transition); }
.bg-color-933196 { background-color: var(--color-purple);   transition: var(--transition); }
.bg-color-0061ae { background-color: var(--color-blue-dk);  transition: var(--transition); }
.bg-color-0096d7 { background-color: var(--color-blue-lt);  transition: var(--transition); }

/*Background colors for hover*/
.bg-color-hover-000000:hover { background-color: var(--color-black);    transition: var(--transition); }
.bg-color-hover-ffffff:hover { background-color: var(--color-white);    transition: var(--transition); }
.bg-color-hover-ce3390:hover { background-color: var(--color-pink);     transition: var(--transition); }
.bg-color-hover-ffdd00:hover { background-color: var(--color-yellow);   transition: var(--transition); }
.bg-color-hover-dd7a08:hover { background-color: var(--color-orange);   transition: var(--transition); }
.bg-color-hover-6ea338:hover { background-color: var(--color-green-dk); transition: var(--transition); }
.bg-color-hover-cadb2a:hover { background-color: var(--color-green-lt); transition: var(--transition); }
.bg-color-hover-de2a3b:hover { background-color: var(--color-red);      transition: var(--transition); }
.bg-color-hover-933196:hover { background-color: var(--color-purple);   transition: var(--transition); }
.bg-color-hover-0061ae:hover { background-color: var(--color-blue-dk);  transition: var(--transition); }
.bg-color-hover-0096d7:hover { background-color: var(--color-blue-lt);  transition: var(--transition); }

/*svg fill colors */
.svg-fill-000000 { fill: var(--color-black);    transition: var(--transition); }
.svg-fill-ffffff { fill: var(--color-white);    transition: var(--transition); }
.svg-fill-ce3390 { fill: var(--color-pink);     transition: var(--transition); }
.svg-fill-ffdd00 { fill: var(--color-yellow);   transition: var(--transition); }
.svg-fill-dd7a08 { fill: var(--color-orange);   transition: var(--transition); }
.svg-fill-6ea338 { fill: var(--color-green-dk); transition: var(--transition); }
.svg-fill-cadb2a { fill: var(--color-green-lt); transition: var(--transition); }
.svg-fill-de2a3b { fill: var(--color-red);      transition: var(--transition); }
.svg-fill-933196 { fill: var(--color-purple);   transition: var(--transition); }
.svg-fill-0061ae { fill: var(--color-blue-dk);  transition: var(--transition); }
.svg-fill-0096d7 { fill: var(--color-blue-lt);  transition: var(--transition); }

/*svg fill colors for hover*/
.svg-fill-hover-000000:hover { fill: var(--color-black);    transition: var(--transition); }
.svg-fill-hover-ffffff:hover { fill: var(--color-white);    transition: var(--transition); }
.svg-fill-hover-ce3390:hover { fill: var(--color-pink);     transition: var(--transition); }
.svg-fill-hover-ffdd00:hover { fill: var(--color-yellow);   transition: var(--transition); }
.svg-fill-hover-dd7a08:hover { fill: var(--color-orange);   transition: var(--transition); }
.svg-fill-hover-6ea338:hover { fill: var(--color-green-dk); transition: var(--transition); }
.svg-fill-hover-cadb2a:hover { fill: var(--color-green-lt); transition: var(--transition); }
.svg-fill-hover-de2a3b:hover { fill: var(--color-red);      transition: var(--transition); }
.svg-fill-hover-933196:hover { fill: var(--color-purple);   transition: var(--transition); }
.svg-fill-hover-0061ae:hover { fill: var(--color-blue-dk);  transition: var(--transition); }
.svg-fill-hover-0096d7:hover { fill: var(--color-blue-lt);  transition: var(--transition); }

/*font colors*/
.font-color-000000 { color: var(--color-black);    transition: var(--transition); }
.font-color-ffffff { color: var(--color-white);    transition: var(--transition); }
.font-color-ce3390 { color: var(--color-pink);     transition: var(--transition); }
.font-color-ffdd00 { color: var(--color-yellow);   transition: var(--transition); }
.font-color-dd7a08 { color: var(--color-orange);   transition: var(--transition); }
.font-color-6ea338 { color: var(--color-green-dk); transition: var(--transition); }
.font-color-cadb2a { color: var(--color-green-lt); transition: var(--transition); }
.font-color-de2a3b { color: var(--color-red);      transition: var(--transition); }
.font-color-933196 { color: var(--color-purple);   transition: var(--transition); }
.font-color-0061ae { color: var(--color-blue-dk);  transition: var(--transition); }
.font-color-0096d7 { color: var(--color-blue-lt);  transition: var(--transition); }

/*font colors for hover*/
.font-color-hover-000000:hover { color: var(--color-black);    transition: var(--transition); }
.font-color-hover-ffffff:hover { color: var(--color-white);    transition: var(--transition); }
.font-color-hover-ce3390:hover { color: var(--color-pink);     transition: var(--transition); }
.font-color-hover-ffdd00:hover { color: var(--color-yellow);   transition: var(--transition); }
.font-color-hover-dd7a08:hover { color: var(--color-orange);   transition: var(--transition); }
.font-color-hover-6ea338:hover { color: var(--color-green-dk); transition: var(--transition); }
.font-color-hover-cadb2a:hover { color: var(--color-green-lt); transition: var(--transition); }
.font-color-hover-de2a3b:hover { color: var(--color-red);      transition: var(--transition); }
.font-color-hover-933196:hover { color: var(--color-purple);   transition: var(--transition); }
.font-color-hover-0061ae:hover { color: var(--color-blue-dk);  transition: var(--transition); }
.font-color-hover-0096d7:hover { color: var(--color-blue-lt);  transition: var(--transition); }