/*///////////////////////////////////////////////////////////////
			//         aaaaaaa   aaa       rr   rrrrrrrr       //
			//       aaaaaaaaaa  aaa       rr  rrrrrrrrrr      //
			//      aa         a aaa       rrrrr               //
			//     aa            aaa       rrrr                //
			//    aa             aaa       rrr                 //
			//    aa             aaa       rrr                 //
			//    aa             aaa       rrr                 //
			//     aa          a aaa       rrr                 // 
			//      aaaaaaaaaaaa aaa  **   rrr             **  //
			//        aaaaaaaaa  aaa  **   rrr             **  // 
			/////////////////////////////////////////////////////
		*/

* {
	margin: 0;
	padding: 0;
}


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

}

body {
	background-color: rgb(255, 240, 230);
	padding-bottom: 15vh; 
}

figcaption {
		
		margin: 0.5vw auto 0 auto;
		font-size: 12pt;
		text-align: center;
		font-family: "Avenir", Arial, sans-serif;
	}

.cream {
	width: 50vw;
	height: 50vw;
	background-color: #ffffff;
	float: left;
}

.blue {
	width: 66%;
	height: 66%;
	margin-left: 17%;
	margin-top: 17%;
	background-color: #6699cc;
}

.purple {
	width: 60%;
	height: 60%;
	margin-left: 20%;
	margin-top: 29.5%;
	background-color: #996699;
	float: left;
}

.red {
	width: 66%;
	height: 66%;
	margin-left: 17%;
	margin-top: 25%;
	background-color: #993333;
	float: left;
}



/*HOVERS*/


.cream:hover {
	background-color: #996699;
}

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

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

.red:hover {
	background-color: #6699cc;
}