* {
	margin: 0;
	padding: 0;
}

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

article {
	float:left;
	height: 100%;
	width: 100%
}

.red {
	background-color: #ec1f26;
}

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

.orange {
	background-color: orange;
}

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

.yellow {
	background-color: #f5ea14;
}

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

.green {
	background-color: limegreen;
}

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

.cyan {
	background-color: cyan;
}

.blue {
	background-color: #1293cc;
}

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

.purple {
	background-color: purple;
}

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

.black {
	background-color: black;
}

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

.white {
	background-color: white;
}

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