/*

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

*/

* { 
	margin: 0;
	padding: 0;
} 

header#canvas { 
	margin: 0.55%;
	padding-top: 0.8%;
      padding-left: 1%;
	width: 39.3vw;
	height: 47.2vw;
} 

article.warmpink {
      width:  24.8%;
      height: 98%;
      margin-top: 0.1%;
      float: left;
}

section.purple {
      width:  100%;
      height: 4%;
      margin-top: 376%;
}

article.pink {
      width:  24%;
      height: 98%;
      margin-top: 0.1%;
      float: left;
}

section.purple2 {
      width:  100%;
      height: 3.9%;
      margin-top: 191%;
}

section.purple3 {
      width:  100%;
      height: 3.9%;
      margin-top: 103.5%;
}

article.purple {
      width:  24%;
      height: 98%;
      margin-top: 0.1%;
      float: left;
}

section.pink {
      width:  100%;
      height: 3.9%;
      margin-top: 282%;
}

article.blue {
      width:  24.7%;
      height: 98%;
      margin-top: 0.1%;
      float: left;
}

section.pink2 {
      width:  100%;
      height: 3.9%;
      margin-top: 91%;
}

section.pink3 {
      width:  100%;
      height: 3.9%;
      margin-top: 305%;
}

/* CSS COLOR CLASSES */

.gray { 
      background-color: rgb(234, 233, 235);
} 

.warmpink { 
      background-color: rgb(218, 119, 150);
} 

.pink { 
      background-color: rgb(199, 111, 181);
} 

.pink2 { 
      background-color: rgb(199, 111, 181);
} 

.pink3 { 
      background-color: rgb(199, 111, 181);
} 

.purple { 
      background-color: rgb(97, 73, 172);
} 

.purple2 { 
      background-color: rgb(97, 73, 172);
} 

.purple3 { 
      background-color: rgb(97, 73, 172);
} 

.blue { 
      background-color: rgb(34, 71, 184);
} 

/* CSS PSUEDO-CLASS HOVER STATES */

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

.warmpink:hover { 
      background-color: rgb(230, 140, 160);
} 

.pink:hover { 
      background-color: rgb(220, 130, 181);
} 

.pink2:hover { 
      background-color: rgb(220, 130, 181);
} 

.pink3:hover { 
      background-color: rgb(220, 130, 181);
} 

.purple:hover { 
      background-color: rgb(120, 93, 192);
} 

.purple2:hover { 
      background-color: rgb(120, 93, 192);
} 

.purple3:hover { 
      background-color: rgb(120, 93, 192);
} 

.blue:hover { 
      background-color: rgb(54, 91, 204);
}