@charset "UTF-8";
/* CSS Document */
*{
	margin: 0;
	padding: 0;
}

main#canvas{
	width: 50vw;
	height: 60vw;
	margin: 0 auto;
	background-color:black;
}

section.column-1{
	width: 11.1%;
	height: 100%;
	border: border-box;
	float: left;
}

section.column-2{
	width: 11.1%;
	height: 100%;
	border: border-box;
	float: left;
	
}

section.column-3{
	width: 11.1%;
	height: 100%;
	border: border-box;
	float: left;
		
}

section.column-4{
	width: 11.1%;
	height: 100%;
	border: border-box;
	float: left;
	
}

section.column-5{
	width: 11.1%;
	height: 100%;
	border: border-box;
	float: left;
		
}

section.column-6{
	width: 11.1%;
	height: 100%;
	border: border-box;
	float: left;
		
}

section.column-7{
	width: 11.1%;
	height: 100%;
	border: border-box;
	float: left;
		
}

section.column-8{
	width: 11.1%;
	height: 100%;
	border: border-box;
	float: left;
		
}

section.column-9{
	width: 11.2%;
	height: 100%;
	border: border-box;
	float: left;
		
}

article.red#number-1{
	width: 100%;
	height: 60%;
	background-color: red;
}

article.yellow#number-2{
	width: 100%;
	height: 10%;
	background-color: yellow;
	float: none;
	clear: left;
}

article.light-green#number-3{
	width: 100%;
	height: 10%;
	background-color: lightgreen;
	float: none;
	clear: left;
}

article.orange#number-4{
	width: 100%;
	height: 10%;
	background-color: orange;
	float: none;
	clear: left;
}

article.dark-blue#number-5{
	width: 100%;
	height: 10%;
	background-color: darkblue;
	float: none;
	clear: left;
}

article.yellow#number-6{
	width: 100%;
	height: 70%;
	background-color: yellow;
	float: none;
	clear: left;
}

article.light-green#number-7{
	width: 100%;
	height: 10%;
	background-color: lightgreen;
	float: none;
	clear: left;
}

article.orange#number-8{
	width: 100%;
	height: 10%;
	background-color: orange;
	float: none;
	clear: left;
}

article.dark-blue#number-9{
	width: 100%;
	height: 10%;
	background-color: darkblue;
	float: none;
	clear: left;
}

article.light-green#number-10{
	width: 100%;
	height: 80%;
	background-color: lightgreen;
	float: none;
	clear: left;
}

article.orange#number-11{
	width: 100%;
	height: 10%;
	background-color: orange;
	float: none;
	clear: left;
}


article.dark-blue#number-12{
	width: 100%;
	height: 10%;
	background-color: darkblue;
	float: none;
	clear: left;
}

article.orange#number-13{
	width: 100%;
	height: 90%;
	background-color: orange;
	float: none;
	clear: left;
}


article.dark-blue#number-14{
	width: 100%;
	height: 10%;
	background-color: darkblue;
	float: none;
	clear: left;
}

article.dark-blue#number-15{
	width: 100%;
	height: 100%;
	background-color: darkblue;
	float: none;
	clear: left;
}
article.orange#number-16{
	width: 100%;
	height: 90%;
	background-color: orange;
	float: none;
	clear: left;
}


article.dark-blue#number-17{
	width: 100%;
	height: 10%;
	background-color: darkblue;
	float: none;
	clear: left;
}

article.light-green#number-18{
	width: 100%;
	height: 80%;
	background-color: lightgreen;
	float: none;
	clear: left;
}

article.orange#number-19{
	width: 100%;
	height: 10%;
	background-color: orange;
	float: none;
	clear: left;
}


article.dark-blue#number-20{
	width: 100%;
	height: 10%;
	background-color: darkblue;
	float: none;
	clear: left;
}

article.yellow#number-21{
	width: 100%;
	height: 70%;
	background-color: yellow;
	float: none;
	clear: left;
}

article.light-green#number-22{
	width: 100%;
	height: 10%;
	background-color: lightgreen;
	float: none;
	clear: left;
}

article.orange#number-23{
	width: 100%;
	height: 10%;
	background-color: orange;
	float: none;
	clear: left;
}

article.dark-blue#number-24{
	width: 100%;
	height: 10%;
	background-color: darkblue;
	float: none;
	clear: left;
}

article.red#number-25{
	width: 100%;
	height: 60%;
	background-color: red;
}

article.yellow#number-26{
	width: 100%;
	height: 10%;
	background-color: yellow;
	float: none;
	clear: left;
}

article.light-green#number-27{
	width: 100%;
	height: 10%;
	background-color: lightgreen;
	float: none;
	clear: left;
}

article.orange#number-28{
	width: 100%;
	height: 10%;
	background-color: orange;
	float: none;
	clear: left;
}

article.dark-blue#number-29{
	width: 100%;
	height: 10%;
	background-color: darkblue;
	float: none;
	clear: left;
}



/* hover black and white */


article.red#number-1:hover{
	background-color: black;
}

article.yellow#number-6:hover{
	background-color: white;
}

article.light-green#number-10:hover{
	
	background-color: black;
	
}

article.orange#number-13:hover{
	
	background-color: white;
	
}

article.dark-blue#number-15:hover{
	
	background-color: black;
	
}

article.orange#number-16:hover{
	
	background-color: white;
	
}

article.light-green#number-18:hover{
	
	background-color: black;
	
}

article.yellow#number-21:hover{
	background-color: white;
}

article.red#number-25:hover{
	background-color: black;
}