/******* Variables */

:root {

/* Colours */

--color-primary: #3096bb;


--color-secondary: #1a282d;


--color-tertiary: #f0f0f0;


--color-quaternary: #0c1924;


--color-quinary: #252422;


--color-white: #ffffff;


--color-black: #000000;




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



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



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




/* Typography */

--font-main: "Ranchers";

--font-headings: "Archivo Black";

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