* {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

body{
	background-color: black;
}

main#canvas {
	width: 100vw;
	height: 64.5vw;
}

section{
	width: 16.6666666667%;
	height: 100%;
	float: left;
}

article{
	width: 60%;
	height: 80%;
	margin-left: 20%;
	margin-top: 35%;
}

figure{
	width: 18%;
	height: 98%;
	margin-left: 5.5%;
	margin-top: 4.5%;
	float: left;
}

	.yellow{
		background-color: #f7ff37;
	}
	.black{
		background-color: black;
	}
	.red{
		background-color: #ff595c;
	}
	.green{
		background-color: #1fd657;
	}
	.teal{
		background-color: #00b092;
	}
	.purple{
		background-color: #935292;
	}
	.cyan{
		background-color: #a2c3ec;
	}
	.hotpink{
		background-color: #ff5f88;
	}
	.lightpink{
		background-color: #fee7ef;
	}
	.orange{
		background-color: #fe9f29;
	}
	.blue{
		background-color: #1233a7;
	}
/* HERE ARE MY PSEUDOCLASSES FOR USER INTERACTION */

	.yellow:hover{
		background-color: blue;
	}
	.black:hover{
		background-color: white;
	}
	.red:hover{
		background-color: green;
	}
	.green:hover{
		background-color: red;
	}
	.teal:hover{
		background-color: orange;
	}
	.purple:hover{
		background-color: pink;
	}
	.cyan:hover{
		background-color: #fee7ef;
	}
	.hotpink:hover{
		background-color: #1233a7;
	}
	.lightpink:hover{
		background-color: orange;
	}
	.orange:hover{
		background-color: #ff5f88;
	}
	.blue:hover{
		background-color: green;
	}