/* =-=-=-=-=-=-=-=-=-=-
=-=-=- CSS RESET -=-=-=
-=-=-=-=-=-=-=-=-=-= */



*{
	margin: 0;
	padding: 0;
}

/* -=-=-=-=-=-=-=-=-=
-=-=-=- CANVAS  -=-=-
=-=-=-=-=-=-=-=-=- */

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

/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=
-=-=- HTML5 SEMANTIC TAGS =-=-=-
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=- */

	section{
		width: 16.667%;
		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;
	}
/* -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-=-=-=- CSS PSEUDO-CLASS HOVER STATUS =-=
=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */

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

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

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

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

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

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

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

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

/* -=-=-=-=-=-=-=-=-=-=
-=-=- COLOR CLASS =-=-=-
=-=-=-=-=-=-=-=-=-=-=-= */

.red {
	background-color: tomato;
}

.orange{
	background-color: orange;
}

.yellow{
	background-color: yellow;
}

.green{
	background-color: limegreen;
}

.cyan{
	background-color: powderblue;
}

.blue{
	background-color: blue;
}

.pink{
	background-color: peachpuff;
}

.black{
	background-color: black;
}