/*
        88     88888888ba,       
        88     88      `"8b      
        88     88        `8b     
        88     88         88     
        88     88         88     
        88     88         8P     
88,   ,d88 888 88      .a8P 888  
 "Y8888P"  888 88888888Y"'  888 */
* {
	margin: 0;
	padding: 0;
}

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

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

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

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

.red {
	background-color: tomato;
}

.orange {
	background-color: orange;
}

.yellow {
	background-color: yellow;
}

.green {
	background-color: limegreen;
}

.cyan {
	background-color: powderblue;
}

.blue {
	background-color: blue;
}

.purple {
	background-color: darkorchid;
}

.pink {
	background-color: peachpuff;
}

.black {
	background-color: black;
}



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

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

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

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

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

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

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

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

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