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

*{
	margin: 0;
	padding: 0;
}

/*===============
==== Canvas  ====
===============*/

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

/*============================
==== HTMLS 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;
}

/*===================
=== 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;
}

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

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

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

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

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

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

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

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

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

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