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



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

* {
	margin: 0;
	padding: 0;
}

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

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

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


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

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

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

article {
	width: 85%;
	height: 65%;
	float: left;
	margin-top: 35%;
	margin-left: 15%;
	
}

article.magenta {
	width: 85%;
	height: 65%;
	float: left;
	margin-top: 0%;
	margin-left: 15%;
	
}

article.orange {
	width: 85%;
	height: 65%;
	float: left;
	margin-top: 35%;
	margin-left: 0%;
	
}

article.red {
	width: 85%;
	height: 65%;
	float: left;
	margin-top: 0%;
	margin-left: 0%;
	
}

figure.purple2 {
	width: 80%;
	height: 60%;
	margin-left: 20%;
	margin-top: 34%;
}

figure.red2 {
	width: 60%;
	height: 30%;
	margin-left: 40%;
	margin-top: -26%;
	float: left;
}

figure.green2 {
	width: 80%;
	height: 60%;
	margin-left: 20%;
	margin-top: 0%;
	float: left;
}

figure.orange2 {
	width: 60%;
	height: 30%;
	margin-left: 40%;
	margin-top: -46%;
	float: left;
}

figure.blue2 {
	width: 80%;
	height: 60%;
	margin-left: 0%;
	margin-top: 34%;
	float: left;
}

figure.magenta2 {
	width: 60%;
	height: 30%;
	margin-left: 0%;
	margin-top: -26%;
	float: left;
}

figure.blue3 {
	width: 80%;
	height: 60%;
	margin-left: 0%;
	margin-top: 0%;
	float: left;
}

figure.yellow2 {
	width: 60%;
	height: 30%;
	margin-left: 0%;
	margin-top: -46%;
	float: left;
}



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


.blue {
	background-color: #339dd9;
}

.green {
	background-color: #2b559f;
}

.darkblue {
	background-color: #61a946;
}

.purple {
	background-color: #484d91;
}

.yellow {
	background-color: #fbe619;
}

.magenta {
	background-color: #bb317e;
}

.orange {
	background-color: #e39f20;
}

.red {
	background-color: #cb3224;
}

.purple2 {
	background-color: #484d91;
}

.red2 {
	background-color: #cb3224;
}

.green2 {
	background-color: #61a946;
}

.blue2 {
	background-color: #2b559f;
}

.green2 {
	backgrounds-color: #61a946;
}

.magenta2 {
	background-color: #bb317e;
}

.blue3 {
	background-color: #339dd9;
}

.orange2 {
	background-color: #e39f20;
}


.yellow2 {
	background-color: #fbe619;
}

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

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

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

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

.purple:hover {
	background-color: midnightblue;
}

.yellow:hover {
	background-color: rebeccapurple;
}

.magenta:hover {
	background-color: yellow;
}

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

.red:hover {
	background-color: purple;
}

.purple2:hover {
	background-color: red;
}

.red2:hover {
	background-color: mediumaquamarine;
}

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

.blue2:hover {
	background-color: lightblue;
}

.green2:hover {
	backgrounds-color: purple;
}

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

.blue3:hover {
	background-color: red;
}

.orange2:hover {
	background-color: #61a946;
}


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