@charset "utf-8";

:root {
	--spitdarkblue: #14213d;
	--spittroncyan: #15c6db;
	--spittrongreen: #28e1a3;
	--spitwhite: #fff;
	--spitgray: #f5f5f5;
}

html{
	font-size:16px;
	text-align: left;
}

body {
	margin: 0px;
	font-family: 'Outfit', sans-serif;
	background: var(--spitwhite);
}

section, footer {
	max-width: 600px;
	padding: 5% 5%;
}

h1 {
	font-weight: 700;
	font-size: 3rem;
	text-align: left;
	text-transform: uppercase;
	color: var(--spitdarkblue);
	margin: 24px 0;
}

h2 {
	font-weight: 300;
	font-size: 1.25rem;
	color: var(--spitdarkblue);
}

p, a {
	font-weight: 300;
	font-size: 1.5rem;
	margin: 6px 0px;
	color: var(--spitdarkblue);
}

p.desc {
	font-weight: 700;
	font-size: 1rem;
	text-transform: uppercase;
	color: var(--spittroncyan);
	margin: 24px 0 0 0;
}

header {
	display: block;
	background: var(--spitdarkblue);	
}

header img {
	display: block;
	width: 50%;
	margin: auto auto;
	padding: 10%
}

section img {
	display: flex;
	justify-content: center;
	width: 250px;
	margin: 40px auto;	
	}

footer{
	background: var(--spitgray);
	margin-top: 10%;
}

footer p{
	font-size: 1rem;
}  

@media only screen and (min-width: 601px) {
	header{
		
	}
	
	header img {
	display: block;
	width: 200px;
	margin: auto auto;
	padding: 64px;
	}
	
	section, footer {
	max-width: 100%;
	padding: 32px 32px;
	}
	
	footer{
	background: var(--spitgray);
	margin-top: 64px;
	}