#grid{
	display: grid;
	height: 800px;
	width:75%;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: 50px auto 50px;
	grid-gap:.5em;
	border:1px solid #2b2b2b;
	margin: 2em auto;
	grid-template-areas:
		'header header header header header header header header header header header header'
		'left left main main main main main main main main right right'
		'footer footer footer footer footer footer footer footer footer footer footer footer'
		;
	
}

.cells{
	border:1px solid #000;
	border-radius:.3em;
	color: black;
	font-weight: bold;
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";
	text-align: center;
	padding:1em;
	font-size: 1.3em;
}

/* Header */
.one{
	background-color:#9932CC;	
	grid-area: header;
}

/* left side bar "left" */
.two{
	background-color:#00BFFF;	
	grid-area: left;
}

/*main content "main" */
.three{
	background-color:#A9A9A9;	
	grid-area: main;
}

/* right side bar* "right" */
.four{
	background-color:#00FFFF;
	grid-area: right;
}

/* footer */
.five{
	background-color:#9932CC;
	grid-area: footer;
}


@media screen and (max-width:800px) {
	
#grid{
	display: grid;
	height: 600px;
	width:95%;
	grid-template-columns: repeat(9, 1fr);
	grid-template-rows: 50px auto 50px 50px;
	grid-gap:.5em;
	border:1px solid #2b2b2b;
	margin: .5em auto;
	grid-template-areas:
		'header header header header header header header header header'
		'left left left main main main main main main'
		'right right right right right right right right right'
		'footer footer footer footer footer footer footer footer footer'
		;
	
}
	
	
	
	
	
}