*{
	margin: 0 auto;
}

header#canvas{
	width: 59vw;
	height: 81vw;	
}

section.grey{
	width: 9.92%;
	height: 100%;
	
	outline: 0.2vw solid;
	outline-color: white;
	margin-right: 20.1%;
	float: left;
}

#last-line{
	margin-right:initial;
}

article.pink{
	width: 100%;
	height: 14%;
	outline: 0.2vw solid;
	outline-color: white;
	display: inline-block;
	margin-top: 201%;
}

#first-line{
	margin-top: initial;
}

figure.black{
	width: 100%;
	height: 25%;
	outline: 0.2vw solid;
	outline-color: white;
	display: inline-block;
	margin-top: 70%;
}

section.blue{
	width: 19.4%;
	height: 100%;
	float: left;
	
}

#left-space{
	margin-left: -19.7%;
}

figure.purple{
	width: 100%;
	height: 4.6%;
	margin-top: 136.5%;
	outline: 0.2vw solid;
	outline-color: white;
}



/* CSS COLOR CLASSES */

.grey{
	background-color: grey;

}

.pink{
	background-color: indianred;
	}


.black{
	background-color: black;
}

.blue{
	background-color: royalblue;
}

.purple{
	background-color: mediumslateblue;
}

.red{
	background-color: red;
}

/* CSS COLOR CLASS HOVER STATES */

.grey:hover{
	background-color: lightgrey;

}

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


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

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

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

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

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;
}