body {

	margin: 0px;
	background-color: #f8f8f8;
}

h1 ,h2, h3, h4, h5, h6 {
	
	font-family: sans-serif;
}

p, li, a, td, figcaption, blockquote {

	font-family: sans-serif;
	font-size: 20px;
	text-decoration: none;
}

body {

	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
	grid-template-rows: auto;
	grid-template-areas: 
		"Header Header Header Header"
		"Aside Main Main Main"
		"Footer Footer Footer Footer";
}

header {

	grid-area: Header;
	display: grid;
	grid-template-columns: 60% 40%;
	height: 125px;
	align-items: center;
	background-color: #879199;
	border-bottom: 5px solid lightgray;
	border-left: 5px solid lightgray;
	border-top: 5px solid #0e0e0e;
	border-right: 5px solid #0e0e0e;
}

header > div {

	height: 115px;
	width: auto;
}

header > div > a > h1 {

	text-decoration: underline;
	color: black;
}

header > nav > menu {

	display: grid;
	list-style: none;
	padding-left: 0px;
	margin: 0px;
}

header > nav > menu > li > a {

	color: #0e0e0e;
}

main {

	grid-area: Main;
	grid-template-columns: 100%;
	align-items: center;
	text-align: center;
	height: 80vh;
	background-color: #f8f8f8;
}

#image {

    border: 10px solid black;
	border-radius: 5px;
}

aside {

	grid-area: Aside;
	display: grid;
	grid-template-columns: 100%;
	background-color: limegreen;
	border-radius: 3px;
	border-bottom: 5px solid lightgray;
	border-left: 5px solid lightgray;
	border-top: 5px solid #0e0e0e;
	border-right: 5px solid #0e0e0e;

}

aside > h1 {

	color: black;
}

footer {

	grid-area: Footer;
	background-color: #879199;
	height: 15vh;
	width: auto;
	border-bottom: 5px solid lightgray;
	border-left: 5px solid lightgray;
	border-top: 5px solid #0e0e0e;
	border-right: 5px solid #0e0e0e;
}

footer > div {

	padding-top: 10px;
}

@media only screen and (max-width:600px) {

	#image {

		height: 150px;
		width: auto;
	}

	aside > h1 {

		font-size: 2vh;
	}
}