@charset "UTF-8";
/* CSS Document */

@import url(fonts.css);


:root{
	--navyblueregular:#29235c;
	--navybluelight:#29235c22;
	--sunflower:#ffed00;
	--greenish:##47d9bf;
	--white100:#ffffff;
	--grey50:#FAFAFA;		
	--bluegrey900:#263238;
	--bluegrey800:#37474F;
	--bluegrey500:#607D8B;

	--maxwidth:1024px;
	--secpadding:32px;
	--logowidth:20vh;
	--logoheight: calc(var(--logowidth) * 0.7);
}


*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body{
	font-family: 'Inter',sans-serif;
	font-weight: 300;

}

.pagewrap{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-direction: column;
}

.section{
	height: 100vh;
	width: 100%;
	padding: var(--secpadding);
	display: flex;
	justify-content: center;
	align-items: center;
}

.intro{
	background-image: radial-gradient(var(--white100) 0%,var(--navybluelight) 100%);
	color: var(--grey50);
	align-items: flex-end;
}

.intro--content{
	height: calc(((100vh - (2 * var(--secpadding))) / 2) + (var(--logoheight) / 2));
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

.content{
	color: var(--navyblueregular);
	background-color: var(--grey50);
}

.content--content{
	max-width: var(--maxwidth);
}

h1{
	font-size: 3rem;
	font-weight: 800;
	margin: 3rem 0;
	color: var(--navyblueregular);
}

h1 span, h2 span{
	border-bottom: 1px solid var(--sunflower);
	background-image: linear-gradient(0deg,var(--sunflower) 0%,var(--sunflower) 25%,var(--grey50) 25%);
	padding: 0 5px;
}

h2{
	font-size: 2.25rem;
	font-weight: 900;
	margin: 3rem 0;
}

p{
	font-size: 1.25rem;
	line-height: 1.5;
	margin: 1.5rem 0;
}

a, a:visited, a:focus, a:hover{
	text-decoration: none;
	color: var(--navyblueregular);
}


svg{
	height: var(--logoheight);
}

.cls-1,.cls-2{fill:var(--grey50);}
.cls-3,.cls-4{fill:#f2d03b;}
.cls-4,.cls-2,.cls-5{opacity:.9;}
.cls-5{fill:#47d9bf;}

@media screen and (max-width: 375px) {
	p{
	font-size: 1rem;
	line-height: 1.25;

	}
}