*{
	margin: 0;
	padding: 0;
	
}

header#canvas{
	width: 48.6vw;
	height: 41vw;
	padding: 2.5vw;
	margin: 0 auto;
}


	section.yellow{
		width: 73%;
		height: 55%;
		margin: 0 auto;

	}

	article#blank{
			padding-top: 4.7vw;
			
		}

	section.black{
			height: 80%;
			width: 75.3%;
			margin: 0 auto;
		}

		figure.red{
			width: 65%;
			height: 48%;
			margin-left :16%;
			margin-top: 17.8%;
			display: inline-block;
		}
	
	section.darkred{
		width: 73%;
		height: 43%;
		margin:0 auto;
	
	}

		figure.orange{
			width: 62%;
			height: 50%;
			display: inline-block;
			margin-left: 18%;
			margin-top: 13%;
		}
		
		figcaption#yellow-section{
			margin-top: 3.1%;
			margin-left: 3.2%;
			width: 93.3%;
			height: 17.1%;
		}
		
		figcaption#purple-section{
			margin-top: 2.8%;
			margin-left: 2.8%;
			width: 95%;
			height: 16.3%;
		}

		
	

/* CSS COLOR CLASSES */

.grey{
	background-color: lightgrey;
}

.yellow{
	background-color: yellow;
	}


.darkred{
	background-color: darkred;
}

.red{
	background-color: red;
}

.black{
	background-color: black;
}

.orange{
	background-color: orange;
}

.purple{
	background-color: royalblue;
}


/* CSS COLOR CLASS HOVER STATES */

.grey:hover{
	background-color: gray;
}

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


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

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

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

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

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

ul{list-style-type: none;
	text-align: center;
	font-size: 18pt;
	margin-top: 2vw;
}

	li {
		display: inline-block;
		margin: 4pt;
	}

	a:hover {
		background-color: #b79eb4;
		color: black;
	}

	.current-page {
		background-color:#ffffff;
		color: #b26491;
	list-style-type: none;
}