/*
 ____ _     ____  _  ____ _____ _  _____ _      ____ 
/   _Y \ /|/  __\/ \/ ___Y__ __Y \/  __// \  /|/  _ \
|  / | |_|||  \/|| ||    \ / \ | ||  \  | |\ ||| / \|
|  \_| | |||    /| |\___ | | | | ||  /_ | | \||| |-||
\____|_/ \|\_/\_\\_/\____/ \_/ \_/\____\\_/  \|\_/ \|

This page was made by Christie!
*/

* {
	margin: 3.4vh auto 0 3.6vw;
	padding: 0;
}

body{
	background-color: white;
}

main#canvas{
	width: 40vw;
	height: 80vh;
}

div {
	width: 100%;
	height: 56%;
	margin: 0 auto;
	float: left;
}

div:hover{
	background-color: #436acc;
}

div#darkred{
	width: 100%;
	height: 44%;
	background-color: #a70817;
}

div#darkred:hover{
	background-color: #436acc;
}

section{
	width: 75%;
	height: 80%;
	margin: 9vh auto;
}

section:hover{
	background-color: #ffa602;
}

article.red{
	display: inline-block;
	width: 67%;
	height: 50%;
	margin: 9vh 5vw;
}

article.red:hover{
	background-color: #436acc;
}

figure.yellow{
	width: 94.5%;
	height: 17%;
	display: block;
	margin: 1vh auto 1.2vh;
}

figure.yellow:hover{
	background-color: #ffa602;
}

article.orange{
	display: inline-block;
	width: 62%;
	height: 50%;
	margin: 9vh 7.5vw;
}

article.orange:hover{
	background-color: #242a28;
}

figure.blue{
	width: 95.5%;
	height: 17%;
	display: block;
	margin: 1.1vh auto;
}

figure.blue:hover{
	background-color: #a70817;
}

/*CSS color classes*/

.yellow{
	background-color: #f8ff00;
}

.black{
	background-color: #242a28;
}

.red{
	background-color: #cc0609;
}

.orange{
	background-color: #ffa602;
}

.blue{
	background-color: #436acc;
}