/*

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

*/


/*CSS RESET */

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

/*CANVAS*/

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

/*ARTIST CREDIT*/

	figcaption {
		width: 50vw;
		margin: 0.5vw auto 0 auto;
		font-size: 12pt;
		text-align: right;
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	}

/*HTML5 SEMANTIC TAGS*/

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

		article {
			width: 64%;
			height: 64%;
			margin-top: 18%;
			margin-left: 19%;
		}

			figure {
				width: 60%;
				height: 60%;
				margin-top: 30%;
				margin-left: 20%;
				float: left;
			}

				header {
					width: 66%;
					height: 66%;
					margin-top: 25%;
					margin-left: 16%;
						float: left;
				}


/*CSS COLOR CLASSES*/

	.white {background-color: #f5f2e9;}
	.blue {background-color: #5788b3;}
	.purple {background-color: #9c6aa7;}
	.red {background-color: #a94545;}

/*HOVER PSEUDO-CLASS INTERACTIONS*/

	.white:hover {background-color: #5788b3;}
	.blue:hover {background-color: #9c6aa7;}
	.purple:hover {background-color: #a94545;}
	.red:hover {background-color: #f5f2e9;}