/*

---      ---  ________
\   \   /  / |_____   |  
 \   \ /  /       /  /
  \      /  hi!  /  /
   \    /       /  /
    |   ||ʘ‿ʘ)╯/  /
    |   |     /  /_____
    |   |    /_________|    
    |___|

*/


/*CSS RESET */

	* {
		margin: 0;
		padding: 0;
		color: #000;
	}

/*CANVAS*/

	main#canvas {
		width: 80vw;
		height: 40vw;
		margin: 5.6vh auto 0 auto;
	}

/*ARTIST CREDIT*/

	figcaption {
		width: 80vw;
		font-size: 12pt;
		text-align: right;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		
	}

/*HTML5 SEMANTIC TAGS*/

	section {
		width: 3%;
		height: 100%;
		float: left;
	}


/*CSS COLOR CLASSES*/

	.purple {background-color: #7a4154;}
	.red {background-color: #a11520;}
	.blue {background-color: #2b378d;}
	.olive {background-color: #6b7338;}
	.orange {background-color:#e65306;}
	.brown {background-color:#41201b;}
	.pink {background-color:#d48284;}
	.black {background-color:#1c1713;}
	.white {background-color:#e1d5c7;}
	.green {background-color:#016533;}
	.yellow {background-color:#ec7703;}
	.aqua {background-color:#0fb897;}
	.sky {background-color:#7faab0;}


/*HOVER PSEUDO-CLASS INTERACTIONS*/
	.purple:hover {background-color: #7faab0;}
	.red:hover {background-color: #7a4154;}
	.blue:hover {background-color: #a11520;}
	.olive:hover {background-color: #2b378d;}
	.orange:hover {background-color:#6b7338;}
	.brown:hover {background-color:#e65306;}
	.pink:hover {background-color:#41201b;}
	.black:hover {background-color:#d48284;}
	.white:hover {background-color:#1c1713;}
	.green:hover {background-color:#e1d5c7;}
	.yellow:hover {background-color:#016533;}
	.aqua:hover {background-color:#ec7703;}
	.sky:hover {background-color:#0fb897;}