*{
	margin:0;
	padding: 0;
}
body{
	background-color:white;
}

		main#canvas{
		width:100vw;
		height:68.5vw;
		background-color:green;
		
}
 
		section{
		width:16.666666667%;
		height:100%;
		float:left;
	}

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

		figure{
		width:18%;
		height:98%;
		float:left;
		margin-left: 6%;
		margin-top:4%;
		}

	.yellow {background-color: #ffff33;}
	.black {background-color: #333333;}
	.red {background-color: #ff6699;}
	.green {background-color: #00cc99;}
	.purple {background-color: #9966cc;}
	.cyan {background-color: #ccffff;}
	.pink {background-color: pink;}
	.orange {background-color: #ff9933;}
	.navy {background-color: navy;}
	.teal {background-color: teal;}
	.white {background-color: #ffffff;}
	.forestgreen {background-color: #33cc66;}
	.navy {background-color: #003399;}
	.deeppurple {background-color: #996699}
	.salmon {background-color: #ff0033;}

/*here are my pseudo classes for user interaction */

	.yellow:hover {background-color: black;}
	.black:hover {background-color: yellow;}
	.red:hover {background-color: green;}
	.green:hover {background-color: red;}
	.purple:hover {background-color: cyan;}
	.cyan:hover {background-color: purple;}
	.pink:hover {background-color: orange;}
	.orange:hover {background-color: pink;}
	.navy:hover {background-color: teal;}
	.teal:hover {background-color: navy;}
	.white:hover {background-color: #ff0033;}
	.forestgreen:hover {background-color: #996699;}
	.navy:hover {background-color: #ffffff;}
	.deeppurple:hover {background-color: #33cc66}
	.salmon:hover {background-color: #996699;}