@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;700;900&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@100;300;400;700;900&display=swap);
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css);

:root{
	/* global font-size */
		/* font-size: 16px; */ /* enable if unset on target site */
	
	/* colours */
		--brand-1-bg: #047fcc; /* main brand colour */
		--brand-1-fg: #ffffff;
		--brand-2-bg: #07a1f7; /* secondary, contrasting brand colour (used to for standouts) */
		--brand-2-fg: #ffffff;
		--brand-3-bg: #f78c00;
		--brand-3-fg: #ffffff;
		--colour-default-bg: #ffffff;
		--colour-default-fg: #474747;
		--colour-on-light: #474747;
		--colour-on-dark: #ffffff;
		--colour-on-image: #ffffff; /* assume light images and dark images to match themes */
		
	/* text */
		/* font families */
			--font-family-default: 'Poppins', sans-serif;
			--font-family-title: 'Montserrat', sans-serif;
			--font-family-article: 'Poppins', sans-serif;
		/* default */
			--font-size-default: 0.8rem; /* assuming html has font-size: 16px; */
			--font-weight-default: 400;
			--line-height-default: 160%;
		/* button */
			--font-size-button: 0.7rem;
			--font-weight-button: 400;
			--text-transform-button: uppercase;
		/* prominent */
			--font-size-prominent: 0.7rem;
			--font-weight-prominent: 500;
			--text-transform-prominent: uppercase;
			
	/* titles */
		--font-size-title1: 2rem;
		--font-size-title2: 2rem;
		--font-size-title3: 1.5rem;
		--font-size-title4: 1.5rem;
		--font-size-title5: 1.2rem;
		--font-size-title6: 1.2rem;
		--font-weight-title: 700;
		--line-height-title: 140%;
		--text-shadow-title: none;
		--text-transform-title: none;
		/* prominent titles like banners */
			--font-size-special: 3rem;
			--font-weight-special: 900;
			--text-shadow-title-special: 0 0 1rem rgba(0,0,0,0.3);
			
	/* alignment */
		--text-align: center; /* general text */
		--layout-align: center; /* general layouts: start / center / end */
		--card-align: left; /* card content */
	
	/* boxes (e.g. cards) */
		--box-bg: #eeeeee;
		--box-shadow: 0 0 0.8rem rgba(0,0,0,0.3);
		--box-border-radius: 3px;
		
	/* buttons */
		--button-padding: 0.5em 1.5em;
		--button-shadow: none;
		--button-shadow-hover: 0 0 0.4rem rgba(0,0,0,0.2);
		--button-border-radius: 3px;
	
	/* misc */
		/* --overlay-bg: rgba(0,96,155,0.6); // for image overlays - applied as "background:" */
		--overlay-bg: linear-gradient(0.35turn,rgba(4,127,204,0.8),rgba(4,127,204,0.4)); /* gradient sample */
		--gradient-overlay: linear-gradient(to top, rgba(238,238,238,1), rgba(238,238,238,0.5) 100%); /* for covering long descriptions - should match --box-bg colour */


}