@import url('https://fonts.googleapis.com/css?family=Julius+Sans+One');


body {
	background-image: url("images/tree.svg");
	background-color: #f7d2aa;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	font-size: 1.1em;
}

.page-wrapper{
	display: grid;
	grid: 25% / auto auto;
	padding: 10%;
	min-width: 900px;
	max-width: 2000px;
	/*background-image: url('images/compass.svg');
	background-repeat: no-repeat;
	background-size: 25%;
*/

}

.intro {
	grid-column: 1/ span 3;
	grid-row: 1;

}

.intro h2{
	font-size: 5em;
	margin-bottom: 0px;
	font-family: 'Julius Sans One'
}

header{
	display: flex;
	flex-direction: column-reverse;
	background-image: url('images/compass.svg');
	background-repeat: no-repeat;
	padding-left: 25%;
	background-size: 25%;
	background-position: left;
	max-width: 900px;


}

h1{
	margin: 1%;
	font-size: .25em;
	font-color: ;
	
}
.summary{
	display: flex;
	justify-content: center;
	padding-left: 25%;
}
.summary p {

}

.preamble {
	grid-column: 3 / span 4;
}

.sidebar {
	grid-column: 4 / span 5;
	grid-row: 2 / span all;
	margin: 5%;
	padding-left: 10%
}

.supporting{
	display: grid;
	grid: auto auto auto auto auto / 1fr 1fr;
	grid-column: 1 / span all;
	grid-row: 2 / span 4;
}

.wrapper {
	display: flex;
	flex-direction: column;
}

ul {
	list-style-type: none;
	

}


.explanation {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
	padding: 20px;
}

.participation {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
	padding: 20px;
}

.benefits {
	grid-column: 1 / 2;
	grid-row: 3 / 4;
	padding: 20px;
}

.requirements {
	grid-column: 1 / 4;
	grid-row: 4 / 5;
	padding: 20px;
}

footer {
	grid-column: 1 / span all;
	grid-row: 5 / 6;
	display: flex;
	justify-content: center;
	margin-top: 7%;
}

footer a {
	padding-left: ;
}

h3 {
	padding: 2%;
	font-size: 1.5em;
	font-family: Julius Sans One;
	border-bottom: 3px solid black;
}
.wrapper {
	display: flex;
	justify-content: space-around;
}

a:link {
	color: #405068;
	text-decoration: none;
	font-size: 1.25em;

}
a:hover {
	font-size: 1.5em;
	border-bottom: 2px solid #405068 ;
}
p{
	font-size:1em;
}



@media screen and (max-width: 900px) {
	.pagewrapper{
	display: grid;
	grid: 25%/ auto;
	width: 100%;
		}
	.supporting {
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: auto;
		}
	.explanation{
		grid-column: 1;
		grid-row: auto;
		}
	.participation{
		grid-column: 1;
		grid-row: auto;
	}
	.benefits{
		grid-column: 1;
		grid-row: auto;
	}
	.requirements{
		grid-column: 1;
		grid-row: auto;
	}
	p {
		margin: 2%;
	}
	.sidebar {
		grid-column: 1;
		grid-row: auto;
	}