* {
	margin:0;
	padding: 0;
}

.lightpink {
	background-color: #FBECF0;
}

.watermelon {
	background-color: #FE6485;
}

.red{
	background-color: #FC4D52;
}

.orange {
	background-color: 	#FFA32F;
}

.yellow {
	background-color: 	#FBFD37;
}

.green {
	background-color: 	#21D460; /*#35A08D*/
}

.seagreen {
	background-color: #35A08D;
}

.cyan {
	background-color: #C1E6FD;
}

.blue {
	background-color: #556CB7;
}

.lightpurple {
	background-color: #8C7DC2;

}

.purple {
	background-color: 	#844282; /*#8C7DC2*/
}

.pink {
	background-color: #F66A95;
}

.black {
	background-color: 	#2A2920;
}

/*that is right. You only have to make the color classes all at first. 
Then, you add those classes to the html in whatever element they are needed in. 
That makes it easy to add the hover effect latert, because you are only
adding it to a handful of color classes.*/

main#canvas {
	width: 68.4vw;
	height: 45.5vw;
}

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

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

figure {
	width: 16.2%;
	height: 97%;
	margin-top: 8%;
	margin-left: 7%;
	float: left;
}

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

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

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

.green:hover {
	background-color: purple;
}

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

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

.purple:hover {
	background-color: green;
}

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

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