:root{
	/* Font */
	--font-light:quicksand-light;
	--font-regular:quicksand-regular;
	--font-medium:quicksand-medium;
	--font-bold:quicksand-bold;

	/* Colour */
	--col-primary:rgba(32,40,51,1); /* Dark Blue */
	--col-dark-blue-gray:rgba(22,30,41,1); /* Slightly Darker Blue */
	--col-secondary:rgba(51,196,216,1); /* Vibrant Blue */
	--col-tertiary:rgba(18,210,221,1); /* Aqua Blue */
	--col-gray:rgba(98,101,106,1); /* Medium Gray */	
	--col-white:rgba(255,255,255,1); /* White */
	
	--col-error:rgba(180,25,47,1); /* Error Red */
	--col-error-light:rgba(216,51,83,1); /* Error Light Red */

	--col-pass:rgba(18,184,91,1); /* Mark passed */
	--col-pass-light:rgba(38,204,111,1); /* Mark passed */

	--col-gray-opacity:rgba(32,40,51,0.8); /* Blue Gray with Opacity */
	--col-dark-gray-opacity:rgba(32,40,51,0.98); /* Dark Blue Gray with Opacity */
	--col-white-opacity:rgba(255,255,255,0.8); /* White with Opacity */

	--col-bg:rgba(255,255,255,1); /* Background */

	/* Aspect Ratio's */
	--aspect-16-9:0 0 56.25% 0;  /* 16:9 */
	--aspect-4-3:0 0 75% 0;  /* 4:3 */
	--aspect-3-2:0 0 66.6% 0;  /* 3:2 */
	--aspect-8-5:0 0 62.5% 0;  /* 8:5 */

	/* Animation & Effects */
	--ease-out:all .25s ease-out;
	--ease-in:all .25s ease-in;

}