*{
	margin: 0;
	padding: 0;

}

header#canvas {
	width: 68vw;
	height: 45vw;
	margin: 2vw auto 0 auto;

}

	section {
		width: 16.66666666666667%;
		height: 100%;
		float: left;
	}

		article {
			width: 60%;
			height: 80.2%;
			margin-top: 40%;
			margin-left: 20%;
		}

			figure {
				width: 17%;
				height: 97.8%;
				margin-top: 5.5%;
				margin-left: 6.4%;
				float: left;
			}


/* CSS NAMED COLOR and HOVER CLASSES */

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

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

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

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

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

	.powderblue {
		background-color: powderblue;
	}

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

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

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

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

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