@charset "UTF-8";
/* CSS Document */

* {
	margin: 0px;
}

#canvas {
	background-color: black;
	width:39.56vw;
	height:39.549vw;
	margin: 2vw auto 0 auto;
}
.topleft
{
	margin-top:45%;
	margin-left:11%;
}
.secondtopleft
{
	margin-top:31%;
	margin-left:18.6%;
}
.thirdtopleft
{
	margin-top:23.5%;
	margin-left:38%;
}
.topright {
	margin-top:45%;
	margin-right:11%;
}
.secondtopright {
	margin-top:31%;
	margin-right:18.6%;
}
.thirdtopright
{
	margin-top:23.5%;
	margin-right:38%;
}
.bottomleft {
	margin-left: 11%;
}
.secondbottomleft {
	margin-left: 18.6%;
}
.thirdbottomleft
{
	margin-bottom:23.5%;
	margin-left:38%;
}
section {
	width:50%;
	height:50%;
	float:left;
}
article {
	width:89.3%;
	height:55%;
}

figure {
	width:81%;
	height:49.5%;
	float:left;
}
div {
	width:62%;
	height:38.2%;
}



/*color*/
.cyan {
	background-color: #369fd9;

}
.cyan:hover {
	background-color: #fbe619;

}
.limegreen {
	background-color: #61a946;
		
}
.limegreen:hover {
	background-color: #e3a01e;
		
}
.blue {
	background-color:#295199;
}
.blue:hover {
	background-color:#b9317d;
}
.violet {
	background-color:#484d91;
}
.violet:hover {
	background-color:#c33122;
}
.yellow {
	background-color:#fbe619;
}
.yellow:hover {
	background-color:#369fd9;
}
.orange {
	background-color:#e3a01e;
}
.orange:hover {
	background-color:#61a946;
}
.pink {
	background-color:#b9317d;
}
.pink:hover {
	background-color:#295199;
}
.red {
	background-color:#c33122;
}
.red:hover {
	background-color:#484d91;
}