* {
	margin: 0;
	padding: 0;

}


header#canvas{
	width: 43vw;
	height: 61.4vw;
	background-color: whitesmoke;
	position: fixed;
		}

article.green{
	display: inline-block;
	width: 83%;
	height: 68%;
	margin: 8%;
}

article.pink{
	display: inline-block;
	width: 83%;
	height: 68%;
	margin: 8%;
}

section.yellow{

			width: 83%;
			height: 32%;
			margin-top: 7%;	
			margin-left: 7%;					
}


section.red{
			width: 83%;
			height: 4%;
			margin-left: 7%;
			}


section.white{
			width: 83%;
			height: 32%;
			margin-left: 7%;
			}


section.greenyellow{
			width: 83%;
			height: 9%;
			margin-left: 7%;
			}


article.blue{
	display: inline-block;
	width: 100%;
	height: 33%;
	margin-top: 5%;
	
}

figure{ 

	display: inline-block;
	width: 96.5%;
	height: 18.5%;
	margin-left: 1.75%;
	margin-top: 1%;
	margin-bottom: 1%;
	

 }
			
section.gray{
			width: 100%;
			height: 5%;
			margin-top: 7%;	
				
}
			

/* css named color classes */


.gray{

	background-color: gray;
}

.gray:hover{

	background-color: hotpink;
}

.orange{
	background-color: orange;

}

.orange:hover{
	background-color: black;

}

.black{

	background-color: black;
}

.black:hover{

	background-color: orange;
}



.blue{
	background-color: blue;
}

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



.pink{
	background-color: pink;
}

.yellow{

	background-color: yellow;
}


.yellow:hover{

	background-color: white;
}
.white{

	background-color: white;
}

.white:hover{

	background-color: yellow;
}

.red{

	background-color: red;
}

.red:hover{

	background-color: blue;
}
.greenyellow{

	background-color: greenyellow;

}

.greenyellow:hover{

	background-color: hotpink;

}

.green{
	background-color: lime;
}