/* we want these color variables to be globally availble, so they're attached to :root */
/* https://www.w3schools.com/css/css3_variables.asp */
/* file name might be colors but it's more like "varibles" cuz lols */

:root {
  --primary-color: #035292;
  --button-color: #0A7AD6;
  --button-blue: #0A7AD6;
  --button-green: #19C87B;
  --button-dark-green: #005005;
  --button-red: #EA4670;
  --white: #FFFFFF;
  --grey: #507391;
  --light-grey: rgba(134,150,164,0.1);
  --footer: #003159;
  --dark-blue: #17354E;
  --CTA-green: #19C87B;
  --CTA-green-2: #00B778;
  --CTA-Blue: #0A7AD6;
  --link: #0078D9;
  --neutral-blue: #035292;
  --light-blue: #CFDFF2;
  --grey-border: #D6DAE5;
  --orange-red: #FC5F48;
  --main-background: #F5F7F8;
  --black: #000000;
  --fb-blue: #3b5998;
  --background-blue: #0A7AD6;
  --active-grey: #8696A4;
  --activated-grey: #5E6C78;
  --max-width: 85em;
  --header-black: #1E354C;
  --h3-black: #1D344B;
  --accent-purple: #9966CC;
  --cyan: #1C9AD6;
}

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

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

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

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

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

.bg-light-grey {
    background-color: var(--grey-border);
}

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

.btn-green {
    background: var(--CTA-green);
}

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

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

.btn-fb {
    background: var(--fb-blue);
}

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