/******* Variables */

:root {

/* Colours */

--color-primary: #f6be25;
--color-primary-rgb: 246,190,37;


--color-secondary: #63cfe3;
--color-secondary-rgb: 99,207,227;


--color-tertiary: #00b74f;
--color-tertiary-rgb: 0,183,79;


--color-quaternary: #ff3c3c;
--color-quaternary-rgb: 255,60,60;


--color-quinary: #232323;
--color-quinary-rgb: 35,35,35;


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


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


--color-lightgray: #e4e4e4;
--color-lightgray-rgb: 228,228,228;


--color-lightergray: #f5f5f5;
--color-lightergray-rgb: 245,245,245;



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



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



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




/* 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-lightergray,
.text-lightergray:visited,
.text-lightergray:hover {
color: var(--color-lightergray);
}

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


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