* {
	paddind: 0;
	margin: 0;
	
}
header#canvas {
	width: 36vw;
	height: 45.6vw;
	background-color: gray;
	margin: 6vh auto;
}
section.yellow {
	width:100%;
	height:41.5%;
}
section.red {
	width:100%;
	height: 6%;
}
section.white {
	width:100%;
	height: 41.8%;
}
section.green {
	width:100%;
	height: 10.8%;
}
figure.green {
	width:100%;
	height: 31.5%;
}
figure.navy {
	width:100%;
	height: 34.5%;
}
figure.lime {
	display: inline-block;
	margin:9% ;
	width:81.5%;
	height:65%;
}
figure.pink {
	display: inline-block;
	margin:9% ;
	width:81.5%;
	height:65%;
}
figcaption.orange {
	margin:1.5%;
	width:97%;
	height:20.6%;
}
figcaption.black {
	margin:1.5%;
	width:97%;
	height:20.6%;
}

/* css color classes */
.yellow {
	background-color: #ede30f
}
.red {
	background-color: #ed1c24
}
.white {
	background-color: #ececec
}
.green {
	background-color: #a9cc38
}
.navy {
	background-color: #263d8e
}
.lime {
	background-color: #88c543
}
.pink {
	background-color: #f491ab
}
.orange {
	background-color: #fbac18
}
.black {
	background-color: #272526
}

/* css hover states */
.yellow:hover {
	background-color: #ef0f4f
}
.red:hover {
	background-color: #0fefc4
}
.white:hover {
	background-color: #35ef0f
}
.green:hover {
	background-color: #35ef0f
}
.navy:hover {
	background-color: #35ef0f
}
.lime:hover {
	background-color: #35ef0f
}
.pink:hover {
	background-color: #35ef0f
}
.orange:hover {
	background-color: #0fefc4
}
.black:hover {
	background-color: #ef0f4f
}