/*

  ()                             
  /\  __,   _  _    _  _    __,  
 /  \/  |  / |/ |  / |/ |  /  |  
/(__/\_/|_/  |  |_/  |  |_/\_/|_/

*/


* { 
	margin: 0;
	padding: 0;
} 

header#canvas { 
	margin: 0.6%;
	padding-top: 1.7%;
	padding-bottom: 0%;
	width: 34.6vw;
	height: 27.8vw;
} 

section.yellow { 
      margin-left: 16.3%;
      width: 66%;
      height: 51.5%;
} 

section.red { 
      margin-left: 16.3%;
      width: 66%;
      height: 41.3%;
} 

article.black {
      width:  74.9%;
      height: 81%;
      margin-top: 12.5%;
      margin-left: 12.3%;
      float: left;
      }

article.orange {
      width:  62%;
      height: 50%;
      margin-top: 12.5%;
      margin-bottom: 11%;
      margin-left: 19%;
      float: left;
      }

figure.red {
      width:  66.3%;
      height: 49%;
      margin-top: 17.5%;
      margin-left: 16.8%;
      float: left;
      }

figure.yellow {
      width:  94%;
      height: 16.8%;
      margin-top: 3.3%;
      margin-left: 3%;
      float: left;
      }     

figure.blue {
      width:  95%;
      height: 15.8%;
      margin-top: 3%;
      margin-left: 2.5%;
      float: left;
      }   

figure.black { 
	display: inline-block;
	width: 65%;
	height: 45%;
} 


/* CSS COLOR CLASSES */

.gray { 
	background-color: rgb(224, 225, 229);
} 

.yellow { 
	background-color: rgb(249, 254, 37);
} 

.red { 
	background-color: rgb(190, 30, 50);
} 

.black { 
	background-color: rgb(36, 36, 24);
} 

.orange { 
	background-color: orange;
} 

.blue { 
	background-color: blue;
} 

/* CSS PSUEDO-CLASS HOVER STATES */

  .yellow:hover {
      background-color: rgb(190, 30, 50);
      }

  .red:hover {
      background-color: rgb(36, 36, 24);
      }

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

  .orange:hover {
      background-color: blue;
      }

  .blue:hover {
      background-color: yellow;
      }