/* --------------- Quantify Design --------------- */


/* --------------- Import web fonts --------------- */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* --------------- Set CSS variables --------------- */


	:root {

		--base-large: 18px;
		--base-small: 12px;

		--base-body-font: 'Inter', Arial, Helvetica, sans-sefif;
		--base-body-font-weight: 200;

		--base-header-font: 'Inter', Arial, Helvetica, sans-sefif;
		--base-header-font-weight: 400;

		/* set maximum wrapper width */

		--wrapper-max-width:1200px;

		/* default color palette */

		--color-white:#ffffff;  /* white */
		--color-black:#000000;  /* black */

		--color-green:#B1EB21;  /* green */
		--color-grey:#e9e9e9;  /* grey */

		--color-dark:#0d0d32;
		--color-background:#0d0d32;

	}


/* --------------- CSS resets --------------- */


	html,body,ul,li,img,article,section,div,nav,h1,h2,h3,h4,h5,p {
		margin:0;
		padding:0;
	}

	img {
		display: block;
	}


/* --------------- Set base styles --------------- */


	html {
		font-family:var(--base-body-font);
		font-size:var(--base-large);
		font-weight:var(--base-body-font-weight);
	}

	body {
		background-color:var(--color-background);
	}

/* --------------- Set id selectors --------------- */

	#header {
		background-color:var(--color-background);
		padding:1.4rem 0 1rem 0;
	}

	#logo {
		flex: 2;
	}

	#nav {
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		padding:0;
	}

	#nav-top {
		flex: 4;
		color:#000;
		padding:0.8rem 0 0.8rem 0;
		font-family: 'Inter', sans-serif;
		font-weight:400;
		font-size:1.2rem;
		text-align:right;
	}

	#hero {
		display:block;
		padding:4rem 0 4rem 0;
		margin:0;
		background-color:#7DB142;
		background-image:url('quantify-design-background.jpg');
		background-size:cover;
		color:var(--color-white);
	}

	#highlight {
		display:block;
		padding:4rem 0 2rem 0;
		margin:0;
		background-color:var(--color-background);
		color:var(--color-white);
	}

	#sub {
		padding-bottom:3rem;
	}


	#footer {
		margin-top:4rem;
		background-color:var(--color-background);
		padding:1rem 0 3rem 0;
	}


/* --------------- Set class selectors --------------- */


	.wrapper {
		margin:0 auto;
		max-width:var(--wrapper-max-width);
		padding:0 4rem 0 4rem;
	}

	.wrapper-full {
		margin:0 auto;
		width:100%;
		max-width:var(--wrapper-max-width);
		padding:0;
	}


	p.bold {
		font-weight:bold;
	}

	p.copyright {
		font-size:0.8rem;
	}

	footer {
		color:#ccc;
		font-family: 'Inter', sans-serif;
	}

	footer p {
		font-size:1rem;
		padding-bottom:2rem;
		color:#fff;
	}



	ul.nav_top li {
		display: inline;
		padding-left:0.8rem;
	}

	ul.nav_top li:first-child {
		padding-left:0;
	}

	ul.nav_top li.optional {
		display:none;
	}




	a:link {
		color:var(--color-green);
		text-decoration: underline;
	}

	a:visited {
		color:var(--color-green);
	}

	a:hover {
		color:var(--color-green);
		text-decoration: underline;
	}

	a:active {
		color:var(--color-green);
	}




	a.nav-top:link {
		color:#000;
		text-decoration: none;
	}

	a.nav-top:visited {
		color:#000;
	}

	a.nav-top:hover {
		color:#000;
		text-decoration: none;
	}

	a.nav-top:active {
		color:#000;
	}




	a.button:link {
		color:var(--color-dark);
		text-decoration: none;
	}

	a.button:visited {
		color:var(--color-dark);
	}

	a.button:hover {
		color:var(--color-dark);
		background-color:var(--color-white);
		text-decoration: none;
	}

	a.button:active {
		color:var(--color-dark);
	}




	ul.nav-bottom {
		font-size:1.2rem;
		margin-bottom:4rem;
	}


	ul.nav-bottom li {
		display: inline;
		padding-left:0.8rem;
	}

	ul.nav-bottom li:first-child {
		padding-left:0;
	}

	ul.nav-bottom li.optional {
		display:none;
	}


	a.nav-bottom:link {
		color:#fff;
		text-decoration: none;
	}

	a.nav-bottom:visited {
		color:#fff;
	}

	a.nav-bottom:hover {
		color:var(--color-green);
		text-decoration: none;
	}

	a.nav-bottom:active {
		color:var(--color-green);
	}



	li {
	    display: inline;
	}

	p {
		font-family: var(--base-body-font);
		font-weight: var(--base-body-font-weight);
		font-size:1.2rem;
		line-height:2.2rem;
		margin-top:2rem;
	}

	p.topic {
		font-family: 'Inter', sans-serif;
		font-weight:700;
		font-size:1rem;
		text-transform:uppercase;
		letter-spacing:0.3rem;
		margin-top:0;
		margin-bottom:1.8rem;
	}


	h1 {
		font-family: var(--base-header-font);
		font-weight:200;
		font-size:2.6rem;
		line-height:3.6rem;
		margin:0;
	}

	h1.title {
		font-size:3.2rem;
		line-height:3.8rem;
	}

	h1.hero {
		display:inline-block;
		font-size:3.2rem;
		font-weight:500;
		color:#0D0D32;
		margin-top:9rem;
		background-color:#B1EB21;
		padding:0.5rem 1rem 0.5rem 1rem;
	}

	.button {
		display:inline-block;
		margin-top:0.8rem;
		background-color:var(--color-green);
		color:var(--color-background);
		padding:1.2rem;
		font-family: 'Inter', sans-serif;
		font-weight:700;
		font-size:1.2rem;
		line-height:1.4rem;
		text-transform:uppercase;
		text-decoration:none;
	}

	.button-color-default {
		background-color:var(--color-green);
	}

	img.scalable {
		width:100%;
		border:0;
		margin:0;
		padding:0;
	}

	img.label {
		max-width:35rem;
	}

	img.logo {
		max-width:10rem;
	}

	img.icon {
		max-width:20rem;
	}




/* --------------- Set utility classes --------------- */


	section.flex {
		display:flex;
		flex-grow: 1;
		flex-basis: 0;
		flex-direction:row;
		flex-wrap: wrap;
		margin:0;
		padding:0;
		justify-content: space-between;
	}

	section.reverse {
		flex-wrap: wrap-reverse;
	}


	.italics {
		font-style:italic;
	}

	.white {
		color:#fff;
	}

	.black {
		color:#000;
	}


	.centered {
		text-align:center;
	}

	.htop {
		align-items: top;
	}


	.hcenter {
		align-items: center;
	}

	.hbottom {
		align-items: end;
	}


	.bg-color-0 {
		background-color:#fff;
	}

	.bg-color-1 {
		background-color:#FADF03;
	}


/* --------------- Media queries --------------- */


	@media screen and (max-width: 768px) {

		html {
			font-size:var(--base-small);
		}


		h1.hero {
			font-size:2.6rem;
		}

		body p {
			font-size:1.6rem;
			line-height:2.8rem;
		}

		.wrapper {
			padding:0 2rem 0 2rem;
		}

	}