/*  
   .*   `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: 73.3vw;
	height: 51.7vw;
	margin: 2vw auto 0 auto;

}
section.gray {
	float: left;
		width: 100%;
		height: 100%;
	}
		article.beige {
			width: 96.8%;
			height: 96%;
			margin-left: 1.5%;
			margin-top: 1.4%;
		}
			main.black {
				width: 27%;
				height: 100%;
				margin-left: 5%;
			}
				figure.pinkone {
					float: left;
					width: 61%;
					height: 45.5%;
				}
				figure.pinktwo {
					width: 39%;
					height: 45.5%;
					margin-left: 61%;
				}
				figure.pinkthree {
					float: left;
					width: 61%;
					height: 54.5%;
				}
				figure.pinkfour {
					width: 39%;
					height: 54.5%;
					margin-left: 61%
				}
					#toprectangle {
						width: 29.9%;
						height: 100%;
						float: right;
					}

					#bottomrectangle {
						margin-left: 40.2%;
						width: 29.9%;
						height: 100%;
						
					}

					#squareone {
						margin-top: 56.1%;
						float: right;
						width: 50.3%;
						height: 27.5%;

					}

					#squaretwo {
						margin-top: 85.93%;
						float: right;
						width: 50.3%;
						height: 27.5%;

					}

					#squarethree {
						float: right;
						margin-top: 88%;
						width: 50.3%;
						height: 22.9%;

					}

		
					
						main {
							margin-top: 1%;
							margin-right: 10%;
							margin-left: 10%;
							margin-bottom: 10%;
						}	
							h1 {
								text-align: center;
							}
					
							h2 {
								text-align: center;
								color:#CFBAFF;
							}
							a {
								text-decoration: none;
								color: #CFBAFF;
							}
							a:hover {
								color: cyan;
							}

/* CSS COLOR CLASSES */

.gray {
	background-color: #E3E3E1;
}

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

.black {
	background-color: #262626;
}
	.black:hover {
		background-color: pink;
	}

.beige {
	background-color: #F1EDDE;
}

	.beige:hover {
			background-color: cyan;
	}