@charset "utf-8";
@import url("styles-1963.css");
/*------     
	
	
	*****   **    **         * ***        ****           * 
  ******  ***** *****       *  ****  *    *  *************  
 **   *  *  ***** *****    *  *  ****    *     *********    
*    *  *   * **  * **    *  **   **     *     *  *         
    *  *    *     *      *  ***           **  *  **         
   ** **    *     *     **   **              *  ***         
   ** **    *     *     **   **   ***       **   **         
   ** **    *     *     **   **  ****  *    **   **         
   ** **    *     *     **   ** *  ****     **   **         
   ** **    *     **    **   ***    **      **   **         
   *  **    *     **     **  **     *        **  **         
      *     *      **     ** *      *         ** *      *   
  ****      *      **      ***     *           ***     *    
 *  *****           **      *******             *******     
*     **                      ***                 ***       
*                                                           
 **                                                         
                        -------*/





/*=-=-=-=-=-=-=-CSS RESET-=-=-=-=-=*/

* {
	margin: 0;
	padding: 0;
}

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

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

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

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

article.darkgreen {
	width: 25%;
	height: 25%;
	margin-top: 75%;
	margin-left: 0%;
	float: left;
}

article.yellow {
	width: 25%;
	height: 25%;
	margin-top: 50%;
}

article.burgundy {
	width: 25%;
	height: 100%;
	margin-top: -75%;
	float: left;
}

article.darkgreen2 {
	width: 25%;
	height: 80%;
	margin-top: -50%;
	float: left;

}

article.darkyellow {
	width: 50%;
	height: 25%;
	margin-top: -105%;
	margin-left: 50%;
	float: left;
}

article.pink {
	width: 25%;
	height: 25%;
	margin-top: 0%;
	margint-left: 60%;
	float: left;
}



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

article.lightgreen2 {
	width: 25%;
	height: 25%;
	margin-top: 75%;
	float: left;
}

article.pink2 {
	width: 50%;
	height: 25%;
	margin-left: 0%;
	margin-top: 75%;
	float: left;
}

article.darkgreen4 {
	width: 100%;
	height: 25%;
	margin-top: -75%;
	float: left;
}

article.darkblue2 {
	width: 25%;
	height: 50%;
	margin-top: -50%;
	margin-left: 75%;
	float: left;
}

article.lightpurple2 {
	width: 25%;
	height: 25%;
	margin-top: -100%;
	margin-left: 30%;
	float: left;
}

article.pink3 {
	width: 45%;
	height: 25%;
	margin-top: -100%;
	margin-left: 55%;
	float: left;
}


section.red {
	width: 20%;
	height: 20%;
	margin-left: -40%;
	margin-top: 20%;
	float: left;
}

article.darkyellow3 {
	width: 50%;
	height: 25%;
	margin-top: 75%;
	margin-left: -75%;
	float: left;
}

article.babygreen {
	width: 25%;
	height: 25%;
	margin-top: 75%;
	margin-left: 50%;
	float: left;
}

article.darkblue3 {
	width: 100%;
	height: 25%;
	margin-top: -50%;
	float: left;
	
}

article.darkgreen5 {
	width: 25%;
	height: 50%;
	margin-top: -100%;
	margin-left: 0%;
	float: left;
}

article.mellow {
	width: 45%;
	height: 25%;
	margin-top: -100%;
	margin-left: 25%;
	float: left;
}

article.lightpurple3 {
	width: 25%;
	height: 25%;
	margin-top: -100%;
	margin-left: 75%;
	float: left;
}


section.green {
	width: 20%;
	height: 20%;
	margin-left: -20%;
	margin-top: 20%;
	float: left;
}

article.burgundy2 {
	width: 50%;
	height: 25%;
	margin-top: 75%;
	float: left;
}

article.yellow2 {
	width: 25%;
	height: 25%;
	margin-left: -50%;
	float: left;
}

article.darkblue4 {
	width: 25%;
	height: 75%;
	margin-left: -25%;
	margin-top: 0%;
	float: left;
}

article.brown {
	width: 25%;
	height: 100%;
	float: left;
	
}

article.pink4 {
	width: 25%;
	height: 25%;
	margin-top: 20%;
	float: left;
	
}

article.blue2 {
	width: 25%;
	height: 25%;
	margin-top: -50%;
	float:left;
}




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

.blue {
	background-color: #3c3e7b;
}

.mustard {
	background-color: #d89a21;
}

.red {
	background-color: #91263a;
}

.green {
	background-color: #67ac6d;
}

.yellow {
	background-color: #f7d722;
}

.darkgreen {
	background-color: #186962;
}

.burgundy {
	background-color: #7c2629;
}

.darkgreen2 {
	background-color: #17675c;
}

.darkyellow {
	background-color: #d89a21;
}

.pink {
	background-color: #a8215b;
}

.darkyellow2 {
	background-color: #d89a21;
}

.darkgreen3 {
	background-color: #196a63;
}

.darkblue {
	backround-color: #22244b;
}

.burgundy2 {
	background-color: #912638;
}

.lightgreen {
	background-color: #67ac6d;
}

.burgundy3 {
	background-color: #882537;
}


.lightpurple {
	background-color: #515595;
}

.lightgreen2 {
	background-color: #6dae76;
}

.pink2 {
	background-color: #aa264d;
}

.darkgreen4 {
	background-color: #14534b;
}

.darkblue2 {
	background-color: #32316b;
}

.lightpurple2 {
	background-color: #4a4e8e;
}

.pink3 {
	background-color: #a62448;
}

.babygreen {
	background-color: #67ac69;
}

.darkgreen5 {
	background-color: #186962;
}

.darkblue3 {
	background-color: #24264f;
}

.lightpurple3 {
	backround-color: #505494;
}

.darkyellow3 {
	background-color: #e2a526;
}

.mellow {
	backround-color: blue;
}

.yellow2 {
	background-color: #f2d522;
}

.darkblue4 {
	backround-color: blue;
}

.brown {
	background-color: #977325;
}

.pink4 {
	background-color: #a9225d;
}

.blue2 {
	background-color: #32316b;
}

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

.mustard:hover {
	background-color: #f7d722;
}

.red:hover {
	background-color: #d89a21;
}

.green:hover {
	background-color: #91263a;
}

.yellow:hover {
	background-color: #67ac6d;
}

.darkgreen:hover {
	background-color: #7c2629;
}

.burgundy:hover {
	background-color: #186962;
}

.darkgreen2:hover {
	background-color: #d89a21;
}

.darkyellow:hover {
	background-color: #17675c;
}

.pink:hover {
	background-color: #d89a21;
}

.darkyellow2:hover {
	background-color: #a8215b;
}

.darkgreen3:hover {
	background-color: #912638;
}

.darkblue:hover {
	backround-color: #196a63;
}

.burgundy2:hover {
	background-color: #22244b;
}

.lightgreen:hover {
	background-color: #515595;
}

.burgundy3:hover {
	background-color: #67ac6d;
}


.lightpurple:hover {
	background-color: #882537;
}

.lightgreen2:hover {
	background-color: #4a4e8e;
}

.pink2:hover {
	background-color: #6dae76;
}

.darkgreen4:hover {
	background-color: #aa264d;
}

.darkblue2:hover {
	background-color: #14534b;
}

.lightpurple2:hover {
	background-color: #32316b;
}

.pink3:hover {
	background-color: #67ac69;
}

.babygreen:hover {
	background-color: #a62448;
}

.darkgreen5:hover {
	background-color: #24264f;
}

.darkblue3:hover {
	background-color: #186962;
}

.lightpurple3:hover {
	backround-color: #e2a526;
}

.darkyellow3:hover {
	background-color: #505494;
}

.mellow:hover {
	backround-color: #f2d522;
}

.yellow2:hover {
	background-color: blue;
}

.darkblue4:hover {
	backround-color: #977325;
}

.brown:hover {
	background-color: blue;
}

.pink4:hover {
	background-color: #32316b;
}

.blue2:hover {
	background-color: #a9225d;
}