@charset "utf-8";
/* CSS Document */

/*====================
==== CSS Reset =======
====================*/


* {
	margin: 0;
	padding: 0;
}

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

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

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

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;
}

/*======================================
==== CSS PSEUDO-CLASS HOVER STATES  ====
======================================*/

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

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

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

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

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

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

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

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

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


/*========================
==== Color classes =======
========================*/

.red{
	background-color: red;
}

.orange{
	background-color: orange;
}

.yellow{
	background-color: yellow;
}

.green{
	background-color: green;
}

.cyan{
	background-color: cyan;
}

.blue{
	background-color: blue;
}

.purple{
	background-color: purple;
}

.pink{
	background-color: pink;
}

.black{
	background-color: black;
}