* {
	margin: 0;
	padding: 0;

}



header#canvas{

	width: 78.2vw;
	height: 52vw;
	background-color: red;

}

		section {
			width: 16.66666666%;
			height: 100%;
			float: left;

		}

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

		}

		figure{
			width: 15%;
			height: 97.5%;
			float: left;
			margin-left: 8%;
			margin-top: 6%;
		}

/* css named color classes */


.red{

	background-color: tomato;
}

.red:hover{

	background-color: peachpuff;
}

.pink{

	background-color: peachpuff;
}

.pink:hover{

	background-color: tomato;
}



.orange{

	background-color: orange;
}

	.orange:hover{

	background-color: yellow;
}


.yellow{

	background-color: yellow;
}

	.yellow:hover{

	background-color: orange;
}

.green{

	background-color: darkcyan;
}

	.green:hover{

	background-color: limegreen;
}

.limegreen{

	background-color: limegreen;
}

	.limegreen:hover{

	background-color: darkcyan;
}
.cyan{

	background-color: cyan;
}

	.cyan:hover{

	background-color: blue;
}

.blue{

	background-color: blue;
}

	.blue:hover{

	background-color: powderblue;
}

.purple{

	background-color: darkorchid;
}

	.purple:hover{

	background-color: black;
}

.black{

	background-color: black;
}

		.black:hover{

	background-color: darkorchid;
}