* {
	margin: 0;
	padding: 0;
	
	
}
h1 {
		width: 50vw;
		height: 10vw;
		transform: translateY(45vw);
		margin-left: 25vw;

			
		}


 h2 {
		transform: rotate(90deg);
		transform: translateY(10vw);
		transform: translateX(10vw);
		transform: rotate(90deg);
		


 }
header#canvas {
	width: 50vw;
	height: 50vw;
	background-color: #ffcc00;
	margin-top: 5vw;
	margin-left: 25vw;
	margin-bottom: 5vw;


}

	section {
		width: 50vw;
		height: 10vw;
		transform: translateY(10vw);




		
	
		
	}

			article {
				width: 15vw:
				height 10vw;

				

			}

			figure {
				width: 60%;
				height:500%;
				float: center;
				margin: auto;
				transform: translateY(-10vw);

				
			}

	/* CSS NAMED COLOR CLASSES*/

	.red {
		background-color: tomato;
	}

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

	.pink {
		background-color: peachpuff;
	}

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

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

	.yellow {
		background-color: yellow;
	}

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

	.green {
		background-color: darkcyan;
	}

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

	.limegreen {
		background-color: #99cc00;
	}
	.limegreen:hover {
		background-color: darkcyan;
	}

	.cyan {
		background-color: powderblue;
	}

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

	.blue {
		background-color: blue;
	}

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

	.purple {
		background-color: darkorchid;
	}

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

	.black {
		background-color: black;
	}

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

	.maroon {
		background-color: maroon;
	}

	.maroon:hover {
		background-color: #99cc00;
	}