*{
	margin: 0;
	padding: 0;

}

header#canvas {
	width: 28.3vw;
	height: 35.6vw;
	margin: 2vw auto 0 auto;

}

	section.yellow {
	
		width: 100%;
		height: 41.5%;

	}
		figure.mediumseagreen {
			display: inline-block;
			margin: 9.3% 9.45%;
			width: 81.7%;
			height: 63.7%;
		}
			figcaption#mediumseagreen{
				
				margin:1.3% 2%;
				width: 96%;
				height: 21%;
			}

	section.red{
		width: 100%;
		height: 6%;

	}
	section.white{
		width: 100%;
		height: 42%;

	}

		figure.pink{
			display: inline-block;
			margin: 9.3% 9.45%;
			width: 81.7%;
			height: 63.7%;
		}
			figcaption#pink{
				
				margin:1.3% 2%;
				width: 96%;
				height: 21%;
			}

	section.yellowgreen{
		width: 100%;
		height: 10.5%;

	}
		figure.midnightblue{
			width: 100%;
			height: 37%;
			display: inline-block;
			margin: 0% 0%;
			margin-bottom: 5%;

		}




		


/* CSS NAMED COLOR and HOVER CLASSES */

  	.yellow {
		background-color: yellow;
	}
		.yellow:hover {
		background-color: tomato;
	}

	.black {
		background-color: black;
	}
		.black:hover {
		background-color: limegreen;
	}

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

	.yellowgreen {
		background-color: yellowgreen;
	}
		.yellowgreen:hover {
		background-color: black;
	}


	.midnightblue {
		background-color: midnightblue;
	}
		.midnightblue:hover {
		background-color: powderblue;
	}

	.orange {
		background-color: orange;
	}
		.orange:hover {
		background-color: peachpuff;
	}

	.pink {
		background-color: pink;
	}
		.pink:hover {
		background-color: orange;
	}

	.mediumseagreen {
		background-color: mediumseagreen;
	}
		.mediumseagreen:hover {
		background-color: pink;
	}

	.white {
		background-color: white;
	}
		.white:hover {
		background-color: purple;
	}