/*  
   .*   `MICHELLE.                      .MICHELLE'    .*             
	       888888888.               	.888888888                  
	       888888'  `888.           .888'  `888888                    
	        88888!  .88.  88.   .88  .88.  88888!                    
	*     `888  	      `8 ( ) 8'           888'                  
	         8888  '"        |U|        "'  8888       .*             
	        888888888888"'   |U|  `888888888888                           
	                .8'     8|U|8     '8.                              
	               .8' 88   8|U|8  88 '8.         .*                 
	            888  `'     8|U|8  `' 888                               
	             88888   .88 |U| 88.   88888                      
	            :8888888888' (U) '8888888888:        *           
	            '! 8888888'       '8888888 !'                     
	      .*        ERAZO          ERAZO                          
	               8                    8                          
	              8                      8                                 
		                       
	.  .._. __ .  ..___.   .   .___  .___.__ .__..___..__.
	|\/| | /  `|__|[__ |   |   [__   [__ [__)[__]  _/ |  |
	|  |_|_\__.|  |[___|___|___[___  [___|  \|  |./__.|__.
	*/
* {
	margin: 0;
	padding: 0;
	font-family:  "Futura","Arial","Helvetica";

}
header#canvas {
	width: 55.1vw;
	height: 65.75vw;
	margin: 2vw auto 0 auto;
}
	section {
		float: left;
		width: 100%;
		height: 100%;
	}
		main {
			width: 95.3%;
			height: 95.8%;
			margin-top: 2%;
			margin-left: 2%;
			margin-right: 10%;
			margin-bottom: 10%;

		}
			article {
				float: left;
				height: 100%;
			}
				article.pink {
					width: 25%;
				}
				article.lilac {
					width: 25%;
				}
				article.purple {
					width: 25%;
				}
				article.blue {
					width: 25%;
				}
					figure#barone {
						width: 100%;
						height: 4%;
						margin-top: 374%;
					}
					figure#bartwo {
						width: 100%;
						height: 3.8%;
						margin-top: 190%;
					}
					figure#barthree {
						width: 100%;
						height: 4%;
						margin-top: 104%;
					}
					figure#barfour {
						width: 100%;
						height: 4%;
						margin-top: 283%;
					}
					figure#barfive {
						width: 100%;
						height: 3.8%;
						margin-top: 90%;
					}
					figure#barsix {
						width: 100%;
						height: 3.8%;
						margin-top: 302%;
					}



					
							h1 {
								text-align: center;
							}
					
							h2 {
								
								color:#CFBAFF;
								text-align: center;
							}
							a {
								text-decoration: none;
								color: #CFBAFF;
							}
							a:hover {
								color: cyan;
							}
/* CSS COLOR CLASSES */
.gray {
	background-color: #EFECEF;
}
	.gray:hover {
	background-color: #C673B6;
	}

.pink {
	background-color: #DA7698;
}
	.pink:hover {
	background-color:limegreen;
	}

.lilac {
	background-color: #C673B6;
}
	.lilac:hover {
	background-color: skyblue;
	}

.purple {
	background-color: #5D4BAE;
}
	.purple:hover {
	background-color:green;
	}

.blue {
	background-color: #1941AF;
}
	.blue:hover {
	background-color: yellow;
	}