@charset "UTF-8";
/* CSS Document 
<!--                     _   _             __                      _                     _ _   _                 
 _ __ ___   __ _ _   _  | |_| |__   ___   / _| ___  _ __ ___ ___  | |__   ___  __      _(_| |_| |__    _   _ ___ 
| '_ ` _ \ / _` | | | | | __| '_ \ / _ \ | |_ / _ \| '__/ __/ _ \ | '_ \ / _ \ \ \ /\ / | | __| '_ \  | | | / __|
| | | | | | (_| | |_| | | |_| | | |  __/ |  _| (_) | | | (_|  __/ | |_) |  __/  \ V  V /| | |_| | | | | |_| \__ \
|_| |_| |_|\__,_|\__, |  \__|_| |_|\___| |_|  \___/|_|  \___\___| |_.__/ \___|   \_/\_/ |_|\__|_| |_|  \__,_|___/
                 |___/ 
																																			-->*/

*{
	margin:0;
	padding:0;
	background-color:black;
}


header#background{
	height:53vw;
	width:52.7vw;
	background-color:silver;
	margin:0vw auto 0 auto;
}

	main#canvas{
		height:86.66%;
		width:86.68%;
		background-color:palegoldenrod;
		margin-top:7.09%;
		margin-left: 7.10%;
		float:left;
		box-shadow: 0 0 20px #333;
		
	}
		article{
			height:25%;
			width:25%;
			float:none;
		}
			section{
				height:100%;
				width:100%;
				margin-left:100%;
				float:none;
			}
				figure{
					height:25%;
					width:25%;
					float:left;
				}

/* CSS COLOR CLASSES */

.yellow{
	background-color:#EDE581;
}
	.yellow:hover{
			background-color:#717DDF;
		}

.purple{
	background-color:#717DDF;
}
	.purple:hover{
			background-color:#EDE581;
		}

.teal{
	background-color:#2C5F5F;
}
.teal:hover{
		background-color:#FB6919;
	}

.orange{
	background-color:#FB6919;
}
	.orange:hover{
		background-color:#2C5F5F;
	}


.darkred{
	background-color:#561F01;
}
	.darkred:hover{
			background-color:#2D243D;
		}

.darkblue{
	background-color:#2D243D;
}
	.darkblue:hover{
			background-color:#561F01;
		}
.greenyellow{
	background-color:#D9DD03;
}
	.greenyellow:hover{
			background-color:#FB6919;
		}
.redorange{
	background-color:#DC3E09;
}
.redorange:hover{
	background-color:teal;
}