* {
	margin: 0;
	padding:0;
	font-family: "courier";
} 

header#canvas {
	width:58vw;
	height: 47vw;
	
}

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

 

/* CSS NAMED COLOR CLASS */

 .lightblue-left {
 			background-color: #529ed4;

 }
 	.lightblue-left:hover {
 			background-color: #71a653;

 }
	

.yellow-left{
 			background-color: #f6e750;
 			width:90%;
 			height:88%;
 			margin-top: 41%;
 			margin-left:10%;
 		}

 	.yellow-left:hover {
 			background-color:#d9a040;
 			
 		}	

 .red-left{
 		background-color: #b93c2c;
 		width:66%;
 		height:57%;
 		margin-top: 12%;
 		margin-left:34%;
 }

 	.red-left:hover {
 		background-color: #ae3e7d;
 		
 }

 .green-right {
 				background-color: #71a653;
 				float:right;
 }
 	.green-right:hover {
 				background-color: #4f9dd5;

 			}

 .orange-right {
 				background-color: #d9a040;
 				width:90%;
 				height:51%;
 				margin-top: 41%;
 				margin-right:10%;

 }

 	.orange-right:hover {
 				background-color: #f6e750;
 			}

 .blue-right{
 		background-color: #30569b;
 		width:81%;
 		height:40%;
 		margin-top: 29%;
 		margin-right:19%;

 }
 	.blue-right:hover {
 		background-color: #525593;
 	}

 .magenta-right{
 		background-color:  #ae3e7d;
 		width:66%;
 		height:48%;
 		margin-top: 12%;
 		margin-right:34%;

 }

 	.magenta-right:hover {
 		background-color:  #b93c2c;
 	}
 
 .purple-left {
 			background-color: #525593;
 			width:81%;
 			height:23%;
 			margin-top: 29%;
 			margin-left:19%;
 }

 	.purple-left:hover {
 			background-color: #30569b;
 			
 }

.blue-left-bottom{
				background-color: #30569b;

}

	.blue-left-bottom:hover {
				background-color: #525593;

}
.magenta-bottom{
			background-color: #ae3e7d;
			width:90%;
 			height:52%;
 			margin-top: 0%;
 			margin-left:10%;
}

	.magenta-bottom:hover {
			background-color: #b93c2c;
}			

.green-bottom{
		background-color: #71a653;
		width:81%;
 		height:35%;

 		margin-left :19%;
}

	.green-bottom:hover {
		background-color: #529ed4;
}

.orange-bottom{
		background-color: #d9a040;
		width:66%;
 		height:45%;
 		margin-top: 0%;
 		margin-left:34%;

}

	.orange-bottom:hover {
		background-color: #f6e750;
	}

.purple-right{
	background-color: #525593;

}

	.purple-right:hover {
	background-color: #b93c2c;

}

.red-right{
	 	background-color: #b93c2c;
	 	width:90%;
 		height:52%;
 		margin-top: 0%;
 		margin-right:10%;

}

	.red-right:hover {
	 	background-color: #b13f7e;

	}

.lightblue-right{
	 		background-color: #529ed4;
	 		width:81%;
 			height:35%;
 			margin-right :19%;
}

.lightblue-right:hover {
	 		background-color: yellow;
	 		}

.yellow-right{
		background-color: #f6e750;
		width:66%;
 		height:45%;
 		margin-top: 0%;
 		margin-right:34%;

}

.yellow-right:hover {
		background-color: #d9a040;
}

/*fanny-sannin no 7*/

header#canvas2 {
	width:61vw;
	height: 47vw;
}

#first-ivory{
		background-color: #fcedc1;
		width:8%;
		height: 100%;
		
	}

	#first-ivory:hover{
		 background-color: rebeccapurple;

	}
#maroon{
		background-color: #473b46;
		width:7%;
		height: 100%;	
	}

	#maroon:hover{
		background-color:orange;
	}

#second-ivory{
		background-color: #f1eac5;
		width:4%;
		height: 100%;
	}

	#second-ivory:hover{
		background-color: rebeccapurple;
	}
	
#dark-brown{
		background-color: #706b60;
		width:5%;
		height: 100%;
	}

	#dark-brown:hover{
		background-color:orange;
	}

#tan{
		background-color: #ccc0a6;
		width:5%;
		height: 100%;
	}

	#tan:hover{
		background-color: rebeccapurple;
	}				

#third-ivory{
		background-color: #f0e9ca;
		width:10%;
		height: 100%;
	}

	#third-ivory:hover{
		background-color:orange;
	}

#light-brown{
		background-color: #a18a71;
		width:4%;
		height: 100%;
	}

	#light-brown:hover{
		background-color: rebeccapurple;
	}				


#darker-brown{
		background-color: #666555;
		width:5%;
		height: 100%;
	}

	#darker-brown:hover{
		background-color:orange;
	}

#fourth-ivory{
		background-color: #f1eac5;
		width:1%;
		height: 100%;

	}

	#fourth-ivory:hover{
		background-color: rebeccapurple;
	}				

/*bridget riley achaean*/

header#canvas3 {
	width:49vw;
	height: 59vw;
	background-color:#53b9df;
}

#pink{
		background-color: #cd7597;
		width:1%;
		height: 100%;
		margin-left: 1%;
}

#pink:hover{
		background-color:red;
	}

#mustard{
		background-color: #d5a64a;
		width:1%;
		height: 100%;
		margin-left: 1%;

}

#mustard:hover{
		background-color:green;
}

#navy{
		background-color: #1c2c48;
		width:1%;
		height: 100%;

}

#navy:hover{
		background-color: lightpink;
}

#mustard-2{
		background-color: #d5a64a;
		width:1%;
		height: 100%;
		
}

#mustard-2:hover{
		background-color:aqua ;

}

#white-close{
		background-color: #e7eff9;
		width:1%;
		height: 100%;
			
}

#white-close:hover{
		background-color: coral;
}

#navy-2{
		background-color: #1c2c48;
		width:1%;
		height: 100%;
		margin-left: 1%
}

#navy-2:hover{
		background-color:cadetblue;
}

#white-far{
		background-color: #e7eff9;
		width:1%;
		height: 100%;
		margin-left: 1%;
			
}

#white-far:hover{
		background-color: chartreuse;
}

#pink-close{
		background-color: #cd7597;
		width:1%;
		height: 100%;
		
}

#pink-close:hover{
		background-color: darkcyan;

}

#pink-3{
		background-color: #cd7597;
		width:1%;
		height: 100%;
		margin-left: 3%;
		
}

#pink-3:hover{
		background-color:dimgray;

}