* {
	margin: 0;
	padding: 0;
}

#canvas {

	width:51.65vw;
	height: 51.68vw;
	background-color: black;
	margin: 2vw auto;
}

.top {
	float: left;
	display: inline;
}

article {

	float: left;
	display: inline;
}


/* FIRST LAYER */

#pink-red {

	width: 27.5%;
	height: 64%;
	background-color: #E72A40;
	

}

#yellow {

	width: 45%;
	height: 36%;
	background-color: #F8EE42;

}

#blue {
	width: 27.5%;
	height: 36%;
	background-color: #2F268D;

}

#orange {

	width: 36.5%;
	height: 28.1%;
	display: inline-block;
	float: left;
	background-color: #EC9621;
}

#black {

	width: 36%;
	height: 64%;
	background-color: #312A35;
	display: inline-block;
}

#white {

	width: 64%;
	height: 36.5%;
	background-color: #DAE9F2;
	display:inline-block;
	float: left;



}


/* SECOND LAYER */



#black2 {

	width: 67%;
	height: 66%;
	background-color: #26241F;
	display: inline-block;
	margin-top: 13%;
	margin-left: 16.5%;

}

#red {

	width: 60%;
	height: 76%;
	background-color: #E52D04;
	display: inline-block;
	margin-top: 27%;
	margin-left: 20%;
}

#pink {

	width: 62%;
	height: 61%;
	background-color: #D60353;
	display: inline-block;
	margin-top: 25%;
	margin-left: 19.5%;

}

#green {

	background-color: #12A145;
	width: 64%;
	height: 56.5%;
	display: inline-block;
	margin-top: 17%;
	margin-left: 18.5%;

}

#yellow1 {

	background-color: #FCF200;
	width: 62%;
	height: 73.5%;
	display: inline-block;
	margin-top: 24%;
	margin-left: 19.5%;

}

#purple {

	background-color: #301C85;
	width: 74%;
	height: 63%;
	display: inline-block;
	margin-top: 11%;
	margin-left: 13%;



}

/* THIRD LAYER */

.yellow {
	height: 96%;
	width: 16%;
	background-color: #FEED00;
	margin-top: 8%;
	margin-left: 7%;
}

.blue {

	height: 89%;
	width: 19.95%;
	background-color: #03459B;
	margin-top: 4%;
	margin-left: 4%;

}

.white {
	
	height: 91%;
	width: 17.5%;
	background-color: #FEFFFD;
	margin-top: 6%;
	margin-left: 6%;


}

.yellow1 {

	height: 91%;
	width: 21.2%;
	background-color: #FEED00;
	margin-top: 3%;
	margin-left: 3%;

}

.pink {
	
	height: 95.5%;
	width: 18.5%;
	background-color: #E7034C;
	margin-top: 5%;
	margin-left: 5%;

}

.orange {

	height: 90.5%;
	width: 21.8%;
	background-color: #ED590A;
	margin-top: 2.5%;
	margin-left: 2.5%;
	}

/* HOVER */

#pink-red:hover {

	background-color: black;
}

#red:hover {

	background-color: green;
}

#yellow:hover {

	background-color: green;
}

#black2:hover {
	background-color: yellow;
}

#blue:hover {

	background-color: #ED590A ;
}

#pink:hover {

	background-color: #03459B;
}

#orange:hover {

		background-color: blue;
	}

#green:hover {

	background-color:black;
}

#black:hover {

	background-color: purple;
}

#yellow1:hover {

	background-color: blue;
}

#white:hover {

	background-color: black;
}

#purple:hover {

	background-color: white;
}