* {
	margin: 0;
	padding: 0;
	background-color: gray;

}
header#canvas {
height: 27vw;
width: 25vw;

}
section {
	float: left;
	width: 100%;
	height: 33.5%;
}
article {
	float: left;
}
figure {
	float: left;
}

article.white1 {
	width: 100%;
	height: 70%;
	margin-left: 0%;
	margin-top: 1%;
}
article.gray1 {
	width: 100%;
	height: 27%;
	margin-left: 0%;
	margin-top: 0%;
}
article.white2 {
	width: 100%;
	height: 33%;
	margin-left: 0%;
	margin-top: 0%;
}
article.red {
	width: 100%;
	height: 33.4%;
	margin-left: 0%;
	margin-top: 0%;
}
article.white3 {
	width: 100%;
	height: 33.4%;
	margin-left: 0%;
	margin-top: 0%;
}
article.gray2 {
	width: 100%;
	height: 27%;
	margin-left: 0%;
	margin-top: 0%;
}
	article.yellow {
	width: 100%;
	height: 70%;
	margin-left: 0%;
	margin-top: 0%;
}
figure.lightgray1
{
	width: 13%;
	height: 40%;
	margin-left: 10%;
	margin-top: 5%;
}
	
	figure.lightgray2
{
	width: 13%;
	height: 40%;
	margin-left: 10%;
	margin-top: 5%;
}
/* CSS NAMED COLOR CLASSES */
.gray {
	background-color: silver;
}
.white1 {
	background-color: white;
}
.gray1 {
	background-color: silver;
}
.white2 {
	background-color: white;
}
.red {
	background-color: orangered;
}
.white3 {
	background-color: white;
}
.gray2 {
	background-color: silver;
}
.yellow {
	background-color: khaki;
}
.lightgray1 { background-color: gainsboro;

}
.lightgray2 { background-color: gainsboro;

}