body {
	color: #000;
	padding: 50px;
	margin: auto;
	font-family: 'Montserrat', sans-serif;
}

/* ---- Set up site grid ---- */

.wrapper {
		display: grid;
		grid-template-columns: 1fr 2fr 1fr;
		grid-template-rows: auto;
		grid-template-areas:
			"logo banner banner"
			"nav nav nav"
			"main main side"
			"footer footer footer";
		grid-gap: 4px;
}

/* ---- End of grid setup ---- */


/* -000- Area styling -000- */

.box {
	border: solid 1px #000;
	padding: 20px;
	border-radius: 10px;
	background-color: #ddd;
}

.logo, .banner, .footer {
	background-color: #e0be36
}



.logo{
	grid-area: logo;
	padding: 0;
	height: 236.25px;
	text-align: center;
}

.banner{
	grid-area: banner;
}

.nav{
	grid-area: nav;
	background-color: #eec07b;
	font-size: 200%;
}

.main{
	grid-area: main;
	background-color: #ffff00;
}

.side{
	grid-area: side;
	background-color: #ffff00;
	
}

a{
	text-decoration: none;
}

.side a{
	color: #228B22;
}

.side a:hover {
	color: 	#ff0000;
}

.nav a{
	color: #5e3021;
}

.nav a:hover {
	color: #848422;
}

.footer{
	grid-area: footer;
	text-align: right;
}

/* -000- End of area styling -000- */

h1, h2, h3, h4 {
	font-family: 'Titillium Web', sans-serif;
}

.contact {
	width: 100%;
}

.sidebar_img {
	max-width: 100%;
	height: auto;
	border-radius: 50%;
	box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.8);
}
.center-img {
	text-align: center;
}
h1 {
	font-size: 400%;
}