@charset "UTF-8";
/*	
			   _   _   _  
		      / \ / \ / \ 
		     ( L | B | R )
		      \_/ \_/ \_/ 
  
*/

* {
	margin: 0;
	padding: 0}

main#canvas {
	width: 57vw;
	height: 57vw;	
}

header {
	width: 50%;
	height: 50%;
	float: left;
}

		section {
		width: 75%;
		height: 75%;
		
		
		}

		article {
		width: %;
		height: 56%;
		margin-left: 10.5%;
		margin-right: 10.5%;
		margin-top: 54%;
		margin-bottom: 44%;

		}

		figure {
		width: %;
		height: 56%;
		margin-left: 10.5%;
		margin-right: 10.5%;
		margin-top: 64%;
		margin-bottom: 44%;
			}

		

/* ARTICLES */


	



/* CSS NAMED COLOR CLASSES */
	.skyblue {
		background-color: #349eda;
	}

	.green {
		background-color: #5fa946;
	}

	.cmtblue {
		background-color: #2a529a;
	}

	.purple {
		background-color: #484d91;
	}

	.yellow {
		background-color: #fbe619;
	}

	.orange {
		background-color: #e39f20;
	}

	.pink {
		background-color: #b9317d;
	}

	.red {
		background-color: #c43121;
	}

	.darkpine {
		background-color: #45615A
	}

	.lightpine {
		background-color: #7BADA1
	}

/* HOVER CLASSES */
	.skyblue:hover {
		background-color: #ffe7ae;
	}

	.green:hover {
		background-color: #423644;
	}

	.cmtblue:hover {
		background-color: #676154;
	}

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

	.yellow:hover {
		background-color: #90725a;
	}

	.orange:hover {
		background-color: #5d5d4e;
	}

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

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

	.darkpine:hover {
		background-color: #45615A
	}

	.lightpine:hover {
		background-color: #7BADA1
	}