/******* Variables */

:root {

/* Colours */

--color-primary: #2d2d2d;


--color-secondary: #7b7b7b;


--color-tertiary: #00AEEC;


--color-quaternary: ;


--color-quinary: ;


--color-white: #ffffff;


--color-black: #000000;


--color-lightgray: #f2f2f2;



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



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




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




/* Typography */






--font-: ABeeZee;



--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-link {
color: var(--color-secondary);
}
/******* END Color Utils */