* {
	margin: 0;
	padding: 0;
}


main#canvas {
	width: 38.3vw;
	height: 39.2vw;
	margin-top: 3.8vw;
	margin-left: 31vw; 
}

section#yellow {
	width: 19.333333333333%;
	height: 100%;
	float: left;
	background-color: #ffd633;

}

section#green {
	width: 58.433333333333%;
	height: 100%;
	float: left;
	background-color: #99cc00;
}


section#yellow {
	width: 20.733333333333%;
	height: 100%;
	float: left;
	background-color: #ffd633;
}


article#maroon {
	width: 33%;
	height: 60%;
	margin-top: 40%;
	margin-left: 33%;
	background-color: #4d0000;
}


article#maroon:hover {
	width: 33%;
	height: 63%;
	margin-top: 40%;
	margin-left: 33%;
	background-color: #ffd633;
}







/* CSS NAMED COLOR CLASSES */


.maroon {
	width: 100%;
	height: 20%;
	background-color: #4d0000;
}


.maroon:hover  {
	width: 100%;
	height: 20%;
	background-color: #ffd633;
}

.yellow {
	width: 25%;
	height: 20%;
	background-color: #ffd633;
}

.yellow:hover {
	width: 25%;
	height: 20%;
	background-color: #99cc00;
}