/* STYLES DESIGNED BY AARON GUHIN
*/
/* CSS RESET */

	*{
		margin: 0;
		padding: 0;
	}

	main#canvas {

		width: 100vw;
		height:66.6666667vw;
			}

		section {
			width:16.666666666667%;
			height: 100%;
			background-color: yellow;
			float: left;
		}

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

				figure {
					width: 17.5%;
					height: 97.5%;
					float:left;
					margin-left: 6%;
					margin-top: 6%;

				}


.yellow {
				background-color: yellow;
			}
			.black {
				background-color: black;
			}
			.red {
				background-color: red;
			}
			.green {
				background-color: green;
			}
			.purple {
				background-color: purple;
			}
			.cyan {
				background-color: cyan;
			}
			.blue {
				background-color: blue;
			}
			.orange {
				background-color: orange;
			}
			.pink {
				background-color: pink;
			}



/* HERE ARE MY PSUEDOCLASSES FOR USER INTERACTION */

			.yellow:hover {
				background-color: red;
			}
			.black:hover {
				background-color: purple;
			}
			.red:hover {
				background-color: green;
			}
			.green:hover {
				background-color: blue;
			}
			.purple:hover {
				background-color: white;
			}
			.cyan:hover {
				background-color: black;
			}
			.blue:hover {
				background-color: orange;
			}
			.orange:hover {
				background-color: pink;
			}
			.pink:hover {
				background-color: cyan;
			}



	body {
		background-color: white;

	}