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

* {
	margin: 0;
	padding: 0;
	text-decoration: none;
}


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

main#canvas {
	width: 54.35vw;
	height: 54.37vw;
	margin:2vw auto 0 auto;
}


/* ---------------------
-----SEMANTIC TAGS------
--------------------- */

section {
	width: 25%;
	height: 25%;
	float: left;
}

article {
	width: 25%;
	height: 25.1%;
	float: left;
}

figcaption {
	text-align: right;
	width: 54.3vw;
	margin:1vw auto 0 auto;
}

/* --------------
--COLOR CLASSES--
-------------- */

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

.cornflowerblue {
	background-color: #7180df;
}
.cornflowerblue:hover {
	background-color: green;
}

.teal {
	background-color: #2c5e5f;
}
.teal:hover {
	background-color: lime;
}

.orange {
	background-color: #fd671a;
}
.orange:hover {
	background-color: black;
}

.morange {
	background-color: #fa5e14;
}
.morange:hover {
	background-color: red;
}

.dyellow {
	background-color: #d9dd04;
}
.dyellow:hover {
	background-color: red;
}

.red {
	background-color: #561f01;
}
.red:hover {
	background-color: cyan;
}

.blue {
	background-color: #2d2345;
}
.blue:hover {
	background-color: chartreuse;
}

.dorange {
	background-color: #d73a05;
}
.dorange:hover {
	background-color: hotpink;
}