/*

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

*/

* { 
	margin: 0;
	padding: 0;
} 

header#canvas { 
	margin: 0.55%;
	padding-top: 1.1%;
      padding-left: 1.65%;
	width: 38.6vw;
	height: 47.3vw;
} 

section.softblue {
      width:  0.9%;
      height: 90%;
      margin-top: 0.1%;
      float: left;
      }

section.petrol {
      width:  0.9%;
      height: 90%;
      margin-top: 0.1%;
      float: left;
      }

section.lightorange {
      width:  0.89%;
      height: 90%;
      margin-top: 0.1%;
      float: left;
      }

section.peach {
      width:  0.88%;
      height: 90%;
      margin-top: 0.1%;
      float: left;
      }

section.black {
      width:  0.945%;
      height: 90%;
      margin-top: 0.1%;
      float: left;
      }

section.white {
      width:  0.9%;
      height: 90%;
      margin-top: 0.1%;
      float: left;
      }


/* CSS COLOR CLASSES */

.gray { 
      background-color: rgb(209, 209, 209);
} 

.softblue { 
	background-color: rgb(116, 136, 181);
} 

.petrol { 
      background-color: rgb(94, 146, 167);
} 

.lightorange      { 
      background-color: rgb(187, 149, 81);
} 

.peach      { 
      background-color: rgb(177, 115, 98);
} 

.black      { 
      background-color: rgb(48, 54, 58);
} 

.white      { 
      background-color: rgb(207, 206, 208);
} 


/* CSS PSUEDO-CLASS HOVER STATES */

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

.softblue:hover { 
      background-color: darkblue;
} 

.petrol:hover { 
      background-color: seagreen;
} 

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

.peach:hover { 
      background-color: hotpink;
} 

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

.white:hover { 
      background-color: indianred;
}