@charset "utf-8";
		/*------     
	
	
	*****   **    **         * ***        ****           * 
  ******  ***** *****       *  ****  *    *  *************  
 **   *  *  ***** *****    *  *  ****    *     *********    
*    *  *   * **  * **    *  **   **     *     *  *         
    *  *    *     *      *  ***           **  *  **         
   ** **    *     *     **   **              *  ***         
   ** **    *     *     **   **   ***       **   **         
   ** **    *     *     **   **  ****  *    **   **         
   ** **    *     *     **   ** *  ****     **   **         
   ** **    *     **    **   ***    **      **   **         
   *  **    *     **     **  **     *        **  **         
      *     *      **     ** *      *         ** *      *   
  ****      *      **      ***     *           ***     *    
 *  *****           **      *******             *******     
*     **                      ***                 ***       
*                                                           
 **                                                         
                        -------*/

* {
	margin: 0;
	padding: 0;
}

/*=-=-==-=-=-=-=-= CANVAS =-=-=-=-=-=-=*/

main#canvas {
	width: 100vw;
	height: 100vw;
	margin-left: 20%;
	margin-top: 5%;
}

/*=-=-=-=-= SEMANTICS =-=-=-=-=-=-=*/


section.cream {
	width: 10%;
	height: 20%;
	float: left;
}

article.darkpurple {
	width: 20%;
	height: 100%;
	margin-left: 15%;
	float: left;
	
}

article.cream2 {
	width: 9%;
	height: 100%;
	margin-left: 0%;
	float: left;
}

article.brown {
	width: 8%;
	height: 100%;
	margin-left: 0%;
	float: left;
}

article.brown {
	width: 9%;
	height: 100%;
	margin-left: 0%;
	float: left;
}

article.grey {
	width: 9%;
	height: 100%;
	margin-left: 0%;
	float: left;
}

article.grey2 {
	width: 20%;
	height: 100%;
	margin-left: 0%;
	float: left;
}

article.darkbrown {
	width: 9%;
	height: 100%;
	margin-left: 0%;
	float: left;
}

article.darkgrey {
	width: 9%;
	height: 100%;
	margin-left: 0%;
	float: left;
}

article.lightbrown {
	width: 10%;
	height: 30%;
	margin-left: 10%;
	float: left;
}

article.grey3 {
	width: 20%;
	height: 100%;
	margin-left: 0%;
	float: left;
}



article.darkpurple2 {
	width: 20%;
	height: 100%;
	margin-left: 0%;
	float: left;
	
}

article.grey4 {
	width: 9%;
	height: 100%;
	margin-left: 0%;
	float: left;
}



article.cream3 {
	width: 9%;
	height: 100%;
	margin-left: 0%;
	float: left;
}


article.brown2 {
	width: 8%;
	height: 100%;
	margin-left: 0%;
	float: left;
}

article.darkbrown2 {
	width: 9%;
	height: 100%;
	margin-left: 0%;
	float: left;
}

article.darkgrey2 {
	width: 9%;
	height: 100%;
	margin-left: 5%;
	float: left;
}




/*=-=-=-=-=-= COLOR CLASSES =-=-=-=-=*/


.cream {
	background-color: #ffe7ae;
}

.darkpurple {
	background-color: #362a34;
}

.cream2 {
	background-color: #f0e4b4;
}

.brown {
	background-color: #5e584c;
}

.grey {
	background-color: #c3b392;
}

.grey2 {
	background-color: #eadbb2;
}

.darkbrown {
	background-color: #8c6a4f;
}

.darkgrey {
	background-color: #534d41;
}


.darkpurple2 {
	background-color: #362a34;
}

.cream4 {
	background-color: #f0e4b4;
}

.cream3 {
	background-color: #f0e4b4;
}

.brown2 {
	background-color: #5e584c;
}

.grey3 {
	background-color: #eadbb2;
}

.grey4 {
	background-color: #c3b392;
}

.darkbrown2 {
	background-color: #8c6a4f;
}

.darkgrey2 {
	background-color: #534d41;
}

/*=-=-=-=-= HOVER COLOR CLASSES=-=-=-=-=-=-=-*/

.cream:hover {
	background-color: #362a34;
}

.darkpurple:hover {
	background-color: #ffe7ae;
}

.cream2:hover {
	background-color: #8c6a4f;
}

.brown:hover {
	background-color: #362a34;
}

.grey:hover {
	background-color: #f0e4b4;
}

.grey2:hover {
	background-color: #5e584c;
}

.darkbrown:hover {
	background-color: #c3b392;
}

.darkgrey:hover {
	background-color: #eadbb2;
}


.darkpurple2:hover {
	background-color: #534d41;
}

.cream4:hover {
	background-color: #5e584c;
}

.cream3:hover {
	background-color: #f0e4b4;
}

.brown2:hover {
	background-color: #f0e4b4;
}

.grey3:hover {
	background-color: #c3b392;
}

.grey4:hover {
	background-color: #eadbb2;
}

.darkbrown2:hover {
	background-color: #534d41;
}

.darkgrey2:hover {
	background-color: #8c6a4f;
}