/*--.......................|....|............. 
...THIS PAGE .............||....||............
..WAS MADE BY ............||||||||............
..ANA!...................||||||||||...........
........................||||||||||||..........
.......................||||||||||||||.........
.........|||.........|||||||||||||||||........
.....||||||||||||...|||||||||||||||||||.......
...|||||||||||||....|||||||||||||||||||.......
........|||||.......|||||||||||||||||||.......
........|||||........|||||||||||||||||........
.........|||..........|||||||||||||||.........
..........||.............|||||||||............*/

@charset "UTF-8"

img {

}
/* CSS RESET */

	* {
		margin: 0;
		padding: 0;
		color: #000;
	}

/*CANVAS*/

	main#canvas {
		width: 45vw;
		height: 46.8vw;
		margin: 5vh auto 5vh auto;
	}

h1 {
	font-family: Nunito;
	text-align: center;
}

h2 {font-family: Nunito;
	text-align: center;
	font-weight: 30px;

}



/* HTML5 SEMANTIC TAGS */

article {
    display: block;
}

/*CSS COLOR CLASSES*/
.crimson { background-color: crimson; }

.olivedrab { background-color: olivedrab; }

.midightblue { background-color: midnightblue; }

.hotpink { background-color: hotpink; }

.gold { background-color: gold; }

.red { background-color:  }


/* CSS CLASSES */

section#crimson {
    width: 100%;
    height: 100%;
    background-color: #dc143c;
    float: left;
}

#olivedrab-1 {
	background-color: #6b8e23;
	width: 40%;
    height: 28%;
    float: left;
}

#midnightblue-1 {
	background-color: #191970;
	width: 40%;
    height: 28%;
    float: left;
}

#hotpink-1 {
	background-color: #ff69b4;
	width: 20%;
    height: 21%;
    float: left;
}

#midnightblue-2 {
	background-color: #191970;
	width: 24%;
    height: 37%;
    float: left;
}

#red-1 {
	background-color: #EF0101;
	width: 30%;
    height: 37%;
    float: left;
}

	
#olivedrab-2 {
	background-color: #6b8e23;
	width: 26%;
    height: 22%;
    float: left;
 }

 #red-2 {
	background-color: #E4021E;
	width: 20%;
    height: 21%;
    float: left;
    margin-top: -7.3%;
}

 #midnightblue-3 {
	background-color: #191970;
	width: 20%;
    height: 30%;
    float: left;
 }

 #gold {
	background-color: #ffd700;
	width: 31%;
    height: 35.1%;
    float: left;
    margin-top: -7.2%;
}

#olivedrab-3 {
	background-color: #6b8e23;
	width: 23%;
    height: 35.1%;
    float: left;
    margin-top: -7.2%;
 }

 #hotpink-2 {
	background-color: #ff69b4;
	width: 26%;
    height: 22%;
    float: left;
    margin-top: -22.9%;
 }


  #red-3 {
	background-color: #E4021E;
	width: 46%;
    height: 28.2%;
    float: left;
}



/* CSS COLOR CLASS HOVER STATES */

#olivedrab-1:hover { background-color: #7fff00; }


#midnightblue-1:hover { background-color: #ffb6c1;}


#hotpink-1:hover { background-color:#7fff00;}


#midnightblue-2:hover { background-color:#f4f5f5;}

#red-1:hover { background-color:#0ff;}

#olivedrab-2:hover { background-color:#ff1493;}


#red-2:hover { background-color:#7cfc00;}

#midnightblue-3:hover { background-color:#00ff7f;} 


#gold:hover { background-color:#4b0082;} 


#olivedrab-3:hover { background-color:#f0f;}

#hotpink-2:hover { background-color:#afeeee;}


#red-3:hover { background-color:#00f;}