:root {
    /* COLORS */
    --gold: gold;
    --red: red;
    --gray: #eae4e4;
    --dark-gray: #2c3e50;
    --black: black;
    --subheader-gray: #7c7979;
    --medusa-blue: #B3DAF8;
    --charcoal-black: #232b2d;
    --quill-gray: #dcdcd9;
    --eee: #eee;
    --a-blue: #337ab7;
    --a-hover-blue: #2a6496;
    --chart:#f8f9fa;
    
    /* FONT SIZES */
    --font30: 1.875rem;
    --font28: 1.75rem;
    --font26: 1.325rem;
    --font24: 1.5rem;
    --font22: 1.375rem;
    --font20: 1.25rem;
    --font18: 1.125rem;
    --font16: 1rem;
    --font14: 0.9rem;
    --font13: 0.85rem;
    --font12: 0.75rem;
    --font10: 0.625rem;
    --font8: 0.5rem;
    /*FONT*/
    --font-primary: "Verdana", "Arial", "sans-serif";
}

/*Colors*/
.color-red {
    color: var(--red);
}

.color-gold {
    color: var(--gold);
}

.color-gray {
    color: var(--gray);
}

.color-dark-gray {
    color: var(--dark-gray);
}

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

.color-gray-2 {
    color: var(--subheader-gray);
}

.color-charcoal-black {
    color: var(--charcoal-black);
}

.color-quill-gray {
    color: var(--quill-gray);
}

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

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

.color-a-hover-blue {
    color: var(--a-hover-blue);
}

/*Fonts
    --font30: 1.875rem;
    --font28: 1.75rem;
    --font26: 1.325rem;
    --font24: 1.5rem;
    --font22: 1.375rem;
    --font20: 1.25rem;
    --font18: 1.125rem;
    --font16: 1rem;
*/
.fs-30 {
    font-size: var(--font30);
}

.fs-28 {
    font-size: var(--font28);
}

.fs-26 {
    font-size: var(--font26);
}

.fs-24 {
    font-size: var(--font24);
}

.fs-22 {
    font-size: var(--font22);
}

.fs-20 {
    font-size: var(--font20);
}

.fs-18 {
    font-size: var(--font18);
}

.fs-16 {
    font-size: var(--font16);
}

.fs-14 {
    font-size: var(--font14);
}

.fs-13 {
    font-size: var(--font13);
}

.fs-12 {
    font-size: var(--font12);
}

.fs-10 {
    font-size: var(--font10);
}

.fs-8 {
    font-size: var(--font8);
}


/*Background Colors*/
.bg-red {
    background-color: var(--red);
}

.bg-gold {
    background-color: var(--gold);
}

.bg-gray {
    background-color: var(--gray);
}

.bg-quill-gray {
    background-color: var(--quill-gray);
}

.bg-subheader-gray {
    background-color: var(--subheader-gray);
}

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

.bg-charcoal-black {
    background-color: var(--charcoal-black);
}

.bg-chart {
    background-color: var(--chart);
}

.bg-linear-gradient {
    background: linear-gradient(90deg,#CBB98F, #96c6ea);
    background-size: 100% 100%;
    animation: gradient 300ms ease infinite;
}