/*                                                                     
     .*   `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;
	color: white;
	text-decoration: none;
	font-family: "Futura", "Arial","Helvetica";
}

header#canvas {
		width: 65.79vw;
		height: 65.289vw;
		margin: 2vw auto 0 auto ;
}

section {
		width: 100%;
		height: 100%;
	}
		article {
			float: left;
			width: 98%;
			height: 98%;
			margin: 1%;
		}
			figure {
				float: left;
			}
			#figureone {
				width: 18.1%;
				height: 62.6%;
				margin-top: 37.2%;
				margin-left: 12%;
			}
				#figureone figcaption {
					float: left;
				}
					#rectangleone {
						width: 31.7%;
						height: 19.60%;
						margin-left: 68.3%;
					}
					#squaretop {
						width: 66%;
						height: 19%;
						margin-left: 34.6%;
					}
					#squarebottom {
						width: 66%;
						height: 19.7%;
						margin-left: 34.6%;
					}
			#figuretwo {
				width: 32%;
				height: 88.5%;
				margin-top: 11.4%;
			}
			#figurethree {
				width: 37.9%;
				height: 38.2%;
				margin-top: 61.33%;
			}	
				#figurethree figcaption {
					float: left;
				}
					#squareleft {
						width: 33%;
						height: 33%;
						margin-top: 33%;
						margin-left: 33%;
					}
					#rectangletwo {
						width: 34%;
						height: 16.5%;
						margin-top: 33%;
					}

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

/* CSS NAMED COLOR CLASS */
.purple {
	background-color: #ae85ca;
}
	.purple:hover {
		background-color: pink;
	}

.red {
	background-color: #fa374a;
}
	.red:hover {
		background-color: white;
	}

.green {
	background-color: #32ad59;
}
	.green:hover {
		background-color: powderblue;
	}

.blue {
	background-color: #29a5bb;
}
	.blue:hover {
		background-color: black;
	}

.black {
	background-color: #1c1813;
}
	.black:hover {
		background-color: purple;
	}