* {
	margin: 0;
	padding: 0;
}

main#canvas {
	width: 60vh;
	height: 76vh;
	margin: 2vh auto 0 auto;
}

section {
	width: 100%;
	/*Solves the margin collapse issue*/
	padding: 1px 0 0 0;
 	margin: -1px auto 0 auto;
}

article {
	margin-top: 8%;
	height: 70%;
	width: 82%;
	margin-left: auto;
	margin-right: auto;
}

figure {
	height: 19%;
	width: 96%;
	margin-top: 2%;
	margin-left: auto;
	margin-right: auto;
}

.red {
	background-color: #e42012;
}

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

.orange {
	background-color: #f8b600;
}

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

.yellow {
	background-color: #eee500;
}

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

.green {
	background-color: #90c24f;
}

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

.cyan {
	background-color: cyan;
}

.blue {
	background-color: #1e388d;
}

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

.purple {
	background-color: purple;
}

.pink {
	background-color: #f09ab3;
}
	.pink:hover {
		background-color: purple;
	}

.black {
	background-color: black;
}

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

.white {
	background-color: white;
}

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