/*///////////////////////////////////////////////////////////////
			//         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;
}

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


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


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

.yellow {
	width: 25%;
	height: 25%;
	background-color: #ffcc66;
	float: left;	
}

.blue {
	width: 25%;
	height: 25%;
	background-color: #6666cc;
	float: left;	
}

.green {
	width: 25%;
	height: 25%;
	background-color: #336666;
	float: left;	
}

.orange {
	width: 25%;
	height: 25%;
	background-color: #ff6633;
	float: left;

}

.multi {
	width: 25%;
	height: 25%;
	float: left;

}

.or {width: 25%;
	height: 25%;
	background-color: #ff6633;
	float: left;

}

.gr {
	width: 25%;
	height: 25%;
	background-color: #336666;
	float: left;	
}

.bl {
	width: 25%;
	height: 25%;
	background-color: #6666cc;
	float: left;	
}

.ye {
	width: 25%;
	height: 25%;
	background-color: #ffcc66;
	float: left;	
}

.lemon {
	width: 25%;
	height: 25%;
	background-color: #cccc00;
	float: left;

}

.brown {
	width: 25%;
	height: 25%;
	background-color: #663300;
	float: left;

}

.navy {
	width: 25%;
	height: 25%;
	background-color: #000033;
	float: left;

}

.red {
	width: 25%;
	height: 25%;
	background-color: #ff3300;
	float: left;

}


/*HOVERS*/

.yellow:hover {
	background-color: #cc99ff;
}

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

.green:hover {
	background-color: #00ffff;	
}

.orange:hover {
	background-color: #33ff33;
}

.or:hover {
	background-color: #33ff33;
}

.gr:hover {
	background-color: #00ffff;
}

.bl:hover {
	background-color: #ff0066;	
}

.ye:hover {
	background-color: #cc99ff;	
}

.lemon:hover {
	background-color: #0000ff;

}

.brown:hover {
	background-color: #ff99ff;

}

.navy:hover {
	background-color: #ff6666;

}

.red:hover {
	background-color:  #ccff99;

}