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

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


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

main#canvas {
	width: 43.3vw;
	height: 54.6vw;
	margin:2vw auto 0 auto;
}


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

section {
	width: 100%;
}

article {
	width: 81.6%;
	float: left;
}

figure {
	width: 96.98%;
	float: left;
	height: 20.34%;
	margin-left: 1.55%;
	margin-top: 1.68%;
	margin-bottom: 0;
}

section.yellow {
	height: 41.8%;
}

section.red {
	height: 5.9%;
}

section.white {
	height: 41.7%;
}

section.lime {
	height: 3.4%;
}

section.blue {
	height: 4%;
}

article.green {
	height: 65.5%;
	margin-left: 9.1%;
	margin-top: 9%;
}

article.pink {
	height: 65.5%;
	margin-left: 9.1%;
	margin-top: 9%;
}

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


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

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

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

.white {
	background-color: #e0dfdb;
}
.white:hover {
	background-color: green;
}

.lime {
	background-color: #b5ce03;
}
.lime:hover {
	background-color: pink;
}

.blue {
	background-color: #183a91;
}
.blue:hover {
	background-color: chartreuse;
}

.green {
	background-color: #a2c65c;
}
.green:hover {
	background-color: black;
}

.pink {
	background-color: #f395b0;
}
.pink:hover {
	background-color: red;
}

.orange {
	background-color: #faba01;
}
.orange:hover {
	background-color: hotpink;
}

.black {
	background-color: #222222;
}
.black:hover {
	background-color: yellow;
}