body{
	display: grid;
	grid-template-columns: auto 60% auto;
	grid-template-areas:
		". header ."
		". nav ."
		". main ."
		". footer .";

}

header{
	grid-area: header;
	text-align: center;
}

nav{
	grid-area: nav;
}

main{
	grid-area: main;
}

footer{
	grid-area: footer;
}




@media screen and (max-width: 800px){
    body{
	display: grid;
	grid-template-columns: auto;
	grid-template-areas:
		"header"
		"nav"
		"main"
		"footer";
    }

}