*{
	margin: 0;
	padding: 0;

}

header#canvas {
	width: 45.3vw;
	height: 45.3vw;
	background-color: magenta; 

}

article#row-one {
		width: 100%;
		height: 25%;
	}

		section.khaki {
			width: 25%;
			height: 100%;
			float: left;
		}
		section.slateblue {
			width: 25%;
			height: 100%;
			float: left;
		}

article#row-two {
		width: 100%;
		height: 25%;
	}

		section.darkcyan {
			width: 25%;
			height: 100%;
			float: left;
		}
		section.tomato {
			width: 25%;
			height: 100%;
			float: left;
		}

			figure.darkcyan {
			width: 25%;
			height: 25%;
			float: left;

				}
			figure.tomato {
			width: 25%;
			height: 25%;
			float: left;
				}
			figure.khaki {
			width: 25%;
			height: 25%;
			float: left;
				}
			figure.slateblue {
			width: 25%;
			height: 25%;
			float: left;
				}


article#row-three {
		width: 100%;
		height: 25%;
	}

		section.khaki {
			width: 25%;
			height: 100%;
			float: left;
		}
		section.slateblue {
			width: 25%;
			height: 100%;
			float: left;
		}

article#row-four {
		width: 100%;
		height: 25%;
	}

		section.darkcyan {
			width: 25%;
			height: 100%;
			float: left;
		}
			figure.yellow {
			width: 25%;
			height: 25%;
			float: left;

				}
			figure.maroon {
			width: 25%;
			height: 25%;
			float: left;
				}

			figure.orangered {
			width: 25%;
			height: 25%;
			float: left;

				}
			figure.midnightblue {
			width: 25%;
			height: 25%;
			float: left;
				}

		section.tomato {
			width: 25%;
			height: 100%;
			float: left;
		}
	


		



		


/* CSS NAMED COLOR and HOVER CLASSES */

  	.yellow {
		background-color: yellow;
	}
		.yellow:hover {
		background-color: tomato;
	}

	.khaki {
		background-color: khaki;
	}
		.khaki:hover {
		background-color: limegreen;
	}

	.tomato {
		background-color: tomato;
	}
		.tomato:hover {
		background-color: yellow;
	}

	.slateblue {
		background-color: slateblue;
	}
		.slateblue:hover {
		background-color: black;
	}


	.darkcyan {
		background-color: darkcyan;
	}
		.darkcyan:hover {
		background-color: powderblue;
	}

	.maroon {
		background-color: maroon;
	}
		.maroon:hover {
		background-color: peachpuff;
	}

	.firebrick {
		background-color: firebrick;
	}
		.firebrick:hover {
		background-color: orange;
	}

	.midnightblue {
		background-color: midnightblue;
	}
		.mmidnightblue:hover {
		background-color: pink;
	}

	.orangered {
		background-color: orangered;
	}
		.orangered:hover {
		background-color: pink;
	}