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

This page was made by Christie!
*/

* {
	margin: 0.6vh auto 0 0.3vw;
	padding: 0;
}

body{
	background-color: white;
}

main#canvas{
	width: 43.4vw;
	height: 76vh;
	background-color: pink;
}

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

section.red{
	width: 49.8%;
	height: 88%;
	margin: 9.1vh 0 0 5.4vw;
	display: inline-block;
	float: left;
}

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

article#top{
	width: 36%;
	height: 29.5%;
	margin: 0;
}

article#middle{
	width: 11%;
	height: 14%;
	margin: 0 0 0 5.4vw;
	
}

article#bottom{
	width: 24.5%;
	height: 14%;
	margin: 0 0 0 2.48vw;
}

article.black{
	width: 24.5%;
	height: 14%;
	margin: 0 0 0 2.48vw;
}

article.black:hover{
	background-color: pink;
}

section.green{
	width: 37.76%;
	height: 37%;
	margin: 47.9vh 0 0 0;
	display: inline-block;
	float: left;
}

section.green:hover{
	background-color: orange;
}

article#square{
	width: 32.5%;
	height: 33%;
	margin: 9.5vh 0 0 5.4vw;
	float: left;
}

article#rectangle{
	width: 34.55%;
	height: 16.5%;
	margin: 9.5vh 0 0 0;
	float: left;
}

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

.blue:hover{
	background-color: #a980c4;
}


/*css color class*/

.purple{
	background-color: #a980c4;
}

.red{
	background-color: #fb354a;
}

.black{
	background-color: #171613;
}

.green{
	background-color: #30ac58;
}

.blue{
	background-color: #2aa1b4;
}