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

body{
	background: lightgrey;
}

header,
footer{
	display: flex;
	justify-content: center;
	align-items: center;
	background: royalblue;
	color: white;
}

nav{
	display: flex;
	justify-content: space-around;
	flex-direction: row;
	background: steelblue;
	
}

@media screen and (max-width: 700px){
	nav{
		flex-direction: column;
	}
	
	.section2{
		flex-grow: 1;
	}
	
	.section2>img{
		width: auto;
	}
}

a{
	text-decoration: none;
}

nav>a{
	color: white;
	padding: 20px;
	font-size: 24px;
	flex-grow: 1;
	text-align: center;
	flex-basis: auto;
}

nav>a.active{
	background: royalblue;
}

nav>a:hover{
	background: white;
	color: black;
}

main{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

main>section{
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	flex-basis: 300px;
	justify-content: center;
	background: white;
	margin: 10px;
	padding: 20px;
}

main>section>img,
main>section>p,
main>section>a,
main>section>button{
	font-size: 20px;
}

main>section>a,
main>section>button{
	color: grey;
	background: lightgrey;
	border: 10px outset lightgrey;
	text-align: center;
	padding: 10px;
	margin: 5px;
}

.section2{
	flex-grow: 2;
}