/******* Variables */

:root {

/* Colours */

--color-primary: #b4181e;
--color-primary-rgb: 180,24,30;


--color-secondary: #414042;
--color-secondary-rgb: 65,64,66;


--color-tertiary: #f7f7f7;
--color-tertiary-rgb: 247,247,247;


--color-quaternary: #828282;
--color-quaternary-rgb: 130,130,130;


--color-quinary: #1a1a1a;
--color-quinary-rgb: 26,26,26;


--color-white: #ffffff;
--color-white-rgb: 255,255,255;


--color-black: #000000;
--color-black-rgb: 0,0,0;


--color-lightgray: #f2f2f2;
--color-lightgray-rgb: 242,242,242;


--color-darkgray: #5a5a5a;
--color-darkgray-rgb: 90,90,90;




--color-link: var(--color-primary);



--color-text-main: var(--color-quaternary);




--color-text-headings: var(--color-secondary);




/* Typography */

--col-gap: 3rem;


}
/******* END Variables */


/******* Color Utils */

.text-primary,
.text-primary:visited,
.text-primary:hover {
color: var(--color-primary);
}

.bg-primary,
.bg-primary:hover {
background-color: var(--color-primary);
}



.text-secondary,
.text-secondary:visited,
.text-secondary:hover {
color: var(--color-secondary);
}

.bg-secondary,
.bg-secondary:hover {
background-color: var(--color-secondary);
}



.text-tertiary,
.text-tertiary:visited,
.text-tertiary:hover {
color: var(--color-tertiary);
}

.bg-tertiary,
.bg-tertiary:hover {
background-color: var(--color-tertiary);
}



.text-quaternary,
.text-quaternary:visited,
.text-quaternary:hover {
color: var(--color-quaternary);
}

.bg-quaternary,
.bg-quaternary:hover {
background-color: var(--color-quaternary);
}



.text-quinary,
.text-quinary:visited,
.text-quinary:hover {
color: var(--color-quinary);
}

.bg-quinary,
.bg-quinary:hover {
background-color: var(--color-quinary);
}



.text-white,
.text-white:visited,
.text-white:hover {
color: var(--color-white);
}

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



.text-black,
.text-black:visited,
.text-black:hover {
color: var(--color-black);
}

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



.text-lightgray,
.text-lightgray:visited,
.text-lightgray:hover {
color: var(--color-lightgray);
}

.bg-lightgray,
.bg-lightgray:hover {
background-color: var(--color-lightgray);
}



.text-darkgray,
.text-darkgray:visited,
.text-darkgray:hover {
color: var(--color-darkgray);
}

.bg-darkgray,
.bg-darkgray:hover {
background-color: var(--color-darkgray);
}


.text-link {
color: var(--color-primary);
}
/******* END Color Utils */