* {
margin: 0;
padding: 0;


}


header#canvas {

width: 35.8vw;
height: 35.8vw;
margin: 0 auto;

}

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

article {

	height: 100%;
	width: 10%;
}


/* CSS NAMED COLOR CLASSES*/

.section1 {

	background-color: black;
	height: 4.3%;
}

.section1:hover {

	background-color: grey;
	
}

.yellow1 {

	background-color: #fff455;
	width: 68%;
}

.yellow1:hover {

	background-color: limegreen;
	
}

.section2 {

	background-color: #3f92c7;
	height: 5.5%;
}

.section2:hover {

	background-color: orange;
	
}

.section3 {

	background-color: #fff455;
	height: 2%;
}

.section3:hover {

	background-color: purple;

}

.blue3 {

	background-color: #3f92c7;
	width: 15.6%;
}

.blue3:hover {

	background-color: orange;
	
}

.section4 {

	background-color: #3f92c7;
	height: 14.5%;
}

.section4:hover {

	background-color: limegreen;
	
}


.yellow4 {

	background-color: #fff455;
	float: right;
	width: 32%;
}

.yellow4:hover {

	background-color: purple;

}

.section5 {

	background-color: white;
	height: 7%;
}

.section5:hover {

	background-color: black;

}

.red {

	background-color: #db3933;
	width: 24.5%;
}

.red:hover {

	background-color: blue;

}

.section6 {

	background-color: #3f92c7;
	height: 23.5%;
}

.section6:hover {

	background-color: purple;
	
}

.yellow6 {

	background-color: #fff455;
	float: right;
	width: 32%;
}

.yellow6:hover {

	background-color: limegreen;

}

.section7 {

	background-color: #fff455;
	height: 24%;
}

.section7:hover {

	background-color: limegreen;
	
}

.black {

	background-color: black;
	width: 24.5%;
}

.black:hover {

	background-color: grey;

}

.section8 {

	background-color: #3f92c7;
	height: 3%;
}

.section8:hover {

	background-color: purple;

}

.section9 {

	background-color: white ;
	height: 14.5%;
}

.section9:hover {

	background-color: black ;

}

.blue9 {

	background-color: #3f92c7;
	width: 52%;
}

.blue9:hover {

	background-color: purple;
	
}

.section10 {

	background-color: #db3933;
	height: 2%;
}

.section10:hover {

	background-color: pink;
	
}

.blue10 {

	background-color: #3f92c7;
	width: 15%;
}

.blue10:hover {

	background-color: purple;

}