body{
    margin: 5px;
    font-family: Calibri;
    background-color: #FFF;
	
	display: grid;

	
	grid-template-columns: 1fr;
	grid-template-areas: "head"
						 "nav"
						 "main"
						 "aside"
						 "foot"
						 "lside";
}





header, nav, main, aside, footer, lside, rside {
    border: 0px solid;
    padding: 10px;
    margin: 0px;
}

header {
    background-color_: #FFFFFF;
    border-color: darkgrey;
    color: black;
    grid-area: head;
	padding: 0px;
}

nav {
    background-color: #FFFFFF;
    border-color_: darkred;
    grid-area: nav;
}

main {
    background-color: #FFFFFF;
    border-color_: darkred;
    grid-area: main;
}

aside {
    background-color: #FFFFFF;
    border-color_: darkred;
    grid-area: aside;
}

footer {
    background-color: #FFFFFF;
    border-top: 2px solid;
	border-color: #c1cdcd;
    grid-area: foot;
}
.lside{
	background-color: #FFFFFF;
    border-color_: #B0B0B0;
    grid-area: lside;
}

.rside{
	background-color: #FFFFFF;
    border-color_: #B0B0B0;
    grid-area: lside;
}
	

}

@media (max-width: 40em)
{
	body
	{
		grid-template-columns: 1fr;
		grid-template-areas: "head"
						 "nav"
						 "main"
						 "aside"
						 "foot"
						 "lside";
	}					 
}

@media (min-width: 41em)
{
	body
	{
		grid-template-columns: repeat(3, 1fr);
		grid-template-areas: "head head head"
							 "nav  nav nav"
							 "main main aside"
							 "foot foot aside"
							 "lside lside lside";
	}					 
}

@media (min-width: 60em)
{
	body
	{
		background-color_: black;
		grid-template-columns: repeat(5, 1fr);
		grid-template-areas: "lside head head head rside"
							 "lside nav  nav nav rside"
							 "lside main main aside rside"
							 "lside foot foot foot rside";
	}					 
}