:root {
	--font-base: 'Open Sans', Helvetica, Arial, sans-serif;
	--font-variant: 'Oswald', Georgia, Times, serif;

	--font-size-xxlarge: 1.9rem;
	--font-size-xlarge: 1.5rem;
	--font-size-large: 1.2rem;
	--font-size-medium: 1rem;
	--font-size-small: 0.8rem;
	--font-size-xsmall: 0.6rem;

	--color-white: #fff;
	--color-black: #000;
	--color-grey: #757575;
	--color-green: #365056;
	--color-yellow: #F6BD60;
	--color-pink: #F5CAC3;
	--color-beige: #F7EDE2;
	--color-red: #B81714;
	--color-blue: #C3E2F5;

	--color-grey-dark: #5C5C5C;
	--color-grey-darker: #424242;
	--color-grey-darkest: #292929;
	--color-grey-light: #8F8F8F;
	--color-grey-lighter: #A8A8A8;
	--color-grey-lightest: #c2c2c2;



	--color-primary: var(--color-green);
	--color-secondary: var(--color-yellow);
	--color-tertiary: var(--color-pink);
	--color-quarternary: var(--color-beige);
	--color-quintenary: var(--color-blue);
	--color-complementary: var(--color-red);

	--color-active: var(--color-primary);
	--color-alert: var(--color-red);

	--root-bg-color: var(--color-primary);

	--page-w: 90%;
	--page-max-w: 90rem;
	--page-footer-margin-top: 8rem;
	--page-footer-padding-block: 2rem;

	--font-text: var(--font-base);
	--color-text: var(--color-grey-dark);

	--font-heading: var(--font-variant);
	--color-heading: var(--color-primary);

	--z-index-flyout: 100;
	--z-index-backdrop: 90;
	--z-index-header: 80;
	--header-height: 90px;
}