*{
	margin: 0;
	padding:0;
}

body{
	background-color:white;
}

		main#canvas{
		width:45.7vw;
		height:45.7vw;
		background-color:black;
		
}

section{
		width:19%;
		height:98%;
		float:left;
		margin-left: 1%;
		margin-top: 1%;
		margin-bottom: 1%;
}
section.green{
		width:20%;
		height:98%;
		float:left;
		margin:top:1%;
		margin-right: 0%;
		margin-left: 0%;
		margin-bottom:1%;
}
article{
		width:19%;
		height:98%;
		float:left;
		margin-top: 1%;
		margin-bottom: 1%;
		margin-right: .5%;
		margin-left: 0%
}
figure{
		width:100%;
		height:20%;
		float:left;
		margin-top:10vw;
				}

aside{
 		width:100%;
		height:60%;
		float:left;
		margin-top:10vw;
		
				}
nav{
		width:100%;
		height:20%;
		float:left;
		margin-top:10vw;}
}

}


	.purple{background-color: #ffcc00;}
	.black {background-color: black;}
	.red {background-color: red;}
	.green {background-color: #999900;}
	.purple {background-color: #660033;}
	.cyan {background-color: cyan;}
	.pink {background-color: pink;}
	.orange {background-color: orange;}
	.navy {background-color: navy;}
	.teal {background-color: teal;}
	.yellow{background-color: #ffcc00;}

	/*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;}