#wrapper {
	background-image: url("pics/vegetables.jpg");
	background-repeat: no-repeat;
	background-attachment:fixed;
	background-size: cover;
	max-width: 2048px;
	display: grid;
	grid-template-areas: 
		'nav' 
		'header'
		'main'
		;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 0px 1px 15px 5px #666666;
} 

body {
	font-family:'Times New Roman', Times, sans-serif;
	margin:0px;	
}

header {
	grid-area: header;
	margin: 3rem 3rem;
	text-align: center;
	height: max-content;
	width: max-content;
    box-shadow: 0px 0px 4px 2px #383838;
	
}

header h1 {
	background-image: url(pics/wood.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	padding: 1rem 2rem;
	text-shadow: .25rem -.25rem .25rem #383838;
    font-size: 7vmax;
	margin: 0;
	
}

nav {
	grid-area: nav;
	background-color:saddlebrown;
	font-weight: bold;
    font-size:150%;
	position: sticky;
	top: 0;
	width: 100%;
	
}

nav a {
	padding: .5rem 0rem;
	text-align: center;
	text-decoration: none;
	color: #000000;
	display: grid;
}

nav a:hover {
	background-color:peru;
}

nav ul {
	list-style: none;
	margin: 0;
	padding: 0px;
	display: grid;
    grid-template-columns: repeat(5,1fr);
}

nav ul li {
	width: 100%;
	box-shadow: 0px 1px 1px 1px peru;
}


main {
	grid-area: main;
	background-color: antiquewhite;
	margin: 0 auto 5rem auto;
	color:black;
	font-size: 2rem;
	padding: 2rem;
	box-shadow: 0px 0px 4px 2px #666666;
	display: grid;
	grid-template-columns: minmax(0,1fr) minmax(0px,1500px) minmax(0,1fr);
}

main div {
	grid-column: 2/3;
}


h2 {
	color:black;
	font-family: 'Georgia', sans-serif;
}


footer {
	background-color: antiquewhite;
	color: #3f3f3f;
	font-size: 1em;
	text-align: left;
	padding: 10px;
	box-shadow: 0px 0px 4px 2px #666666;
}

footer h4 {
	margin: 0;
	font-size: 2rem;
    color: #272727;
	text-decoration: underline;
	padding: 10px
}

footer div {
	padding: 0 0 15px 15px;
}



@media only screen and (max-width: 992px) {
	#wrapper {
		margin: 0;
		background-image: none;
	}

	header {
		grid-area: header;
		background-image: url(pics/wood.jpg);
		background-size: cover;
		background-repeat: no-repeat;
		margin: 0;
		text-align: center;
		padding: 1rem ;
		width: 100%;
	}
	
	header h1 {
		font-size:8vmax;
	}

	main {
		margin: 0;
		padding-left: 1rem;
	}
}

@media only screen and (max-width: 768px) {
		
	header h1 {
		font-size:4vmax;
	}
	nav ul {
		grid-template-columns: none;
	}
	
	main {
		margin: 0;
		padding-left: 1rem;
	}
}