* {
	margin: 0;
	padding: 0;
}

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

section {
	height: 25%;
	width: 100%
}

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






.red {
	background-color: red;
}

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

.orange {
	background-color: #fb6916;
}

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

.yellow {
	background-color: #ebdf7b;
}

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

.green {
	background-color: #2a5c5b;
}

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

.cyan {
	background-color: cyan;
}

.blue {
	background-color: blue;
}

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

.purple {
	background-color: #737fe1;
}
	.purple:hover {
		background-color: green;
	}

.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;
	}


/*for that bottom left complicated part*/

.yellow-two {
	background-color: #d4de03
}
	.yellow-two:hover {
		background-color: blue;
	}


.brown {
	background-color: #562102
}
	.brown:hover {
		background-color: green;
	}

.orange-two {
	background-color: #da3b04;
}
	.orange-two:hover {
		background-color: red;
	}

.dark-purple {
	background-color: #2c223d;
}
	.dark-purple:hover {
		background-color: teal;
	}