* {
	margin:0;

}


header#canvas {
		width: 43vw; 
		height:54vw; 
		margin:0 auto;
		padding-top:40px;


}


section {
		width:100%;
		height: 42%;

}


article {
		width: 82%;
		height:66.8%;
		margin-left:9%;
		float:left;
		margin-top:8%;

}

 figure {
 	width: 97%;
 	height:20%;
 	margin-left: 1.5%;
 	margin-top: 1.7%;
 	float: left;
 }

 /* color classes */
 
 .orange {
 		 background-color: orange; 
}

.orange:hover{
	background-color:red;

}

.lightgreen {
		background-color:#a5c66b; 

}

.lightgreen:hover {
			background-color: navy;

}

.yellow {
		background-color:yellow;
}

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

.red {
	background-color: #e83519;
	width:100%;
	height:6%; 
}

.red:hover{
		background-color:cyan;
}

.black {
		background-color:black;
}

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

.pink {
		background-color:pink;

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

.white {
		background-color: #f1f2f1; 
}
.white:hover {
		background-color:#ffe6cc; 
}

.green{
	background-color: #80ff00; 
	width:100%;
	height:4%;

}

.green:hover{
		background-color:#eeccff;
}

.blue{
	  background-color:#3333ff;
	  width:100%;
	  height:5%;
}

.blue:hover{
		background-color:#b31aff;
}