/* CSS RESET */

* {
	margin:0;
	padding:0;
}

header, main, section {
	float: center; 

}



/* -=-=-= CANVAS -=-=-=- */
header#canvas {
	width: 44.5vw;
	height: 46vw;
	background-color: grey;
	margin: 2vw auto;
}

main.black {
	display: inline-block;
	width: 100%;
	height: 100%;
	background-color: black;

}

/* html color syntax */

		

	section.yellow {
		display:inline-block;
		width: 50%;
		height: 48.5%;
		background-color: #b9d453;
		margin-top: 8%;
		margin-left: 25%;


		
		
	}

		figure.green {
			display: inline-block;
			width:70%;
			height: 70%;
			background-color: #099d78;
			margin-left: 15%;
			margin-top: 18.7%;
		}

		figcaption.orange {
			margin-left:6%;
			margin-top: 3%;

			width: 17.7%;
			height: 95%;
			background-color: #f25939;
			float:left;
			

		}

	section.red {
		width: 40%;
		height: 33.5%;
		background-color: #d53029;
		margin-left: 2%;
		position: absolute;
		
		
	}
		figure.blue {
			width:80%;
			height:70%;
			background-color: #21439c;
			margin-top:6.5%;
			margin-left: 10%;
			padding-top: 1%;
			
		}

		figcaption.cyan {
			background-color:#5b8fcb;
			width:93%;
			height:15%;
			margin-top:3.5%;
			margin-left:3%;

		}
		

	section.purple {
		
		width: 44.95%;
		height: 15%;
		background-color:#563e92;
		margin-top: 17.8%;
		position:absolute;

		
	}


		figure.emeraldgreen {
			width: 100%;
			height: 30%;
			margin-top: 7%;
			background-color: #015158;

		}

	article.bluess {
		width: 35%;
		height:30%;
		background-color: ;
		margin-left: 5%;
		margin-top: 12.16%;
		position: absolute;
		
	}

	section.electricblue {
		width: 12.65%;
		height: 18%;
		background-color: #00a2ad;
		margin-left: 5%;
		margin-top: 15%;
		position: absolute;
		
			}

	section.electric-b {
		width:10%;
		height: 74%;
		background-color: #00a2ad;
		margin-top:15%;
		position:absolute;
	}

	section.darkblue {
		float:right;
		margin-left: 82%;
		width:18%;
		height: 18%;
		background-color:#007096;
		position: absolute;

	} 

	section.dark-b {
		width: 10%;
		height: 100%;
		background-color: #007096;
		margin-left:90%;
		
		position: absolute;
	}


	/* -=-= color hover -=-=- */

	.black:hover {
		background-color: turquoise;
	}

	.darkblue:hover {
		background-color: orange;
	}
	.dark-b:hover {
		background-color: red;
	}
	.electricblue:hover {
		background-color: lavender;
	}
	.electric-b:hover {
		background-color: peachpuff;
	}
	.yellow:hover {
		background-color: violet;
	}
	.green:hover {
		background-color: tomato;
	}
	.orange:hover {
		background-color: blue;
	}
	.red:hover {
		background-color: darkgreen;
	}
	.blue:hover {
		background-color: magenta;
	}
	.cyan:hover {
		background-color: yellow;
	}
	.purple:hover {
		background-color: brown;
	}
	.emeraldgreen:hover {
		background-color: ruby;
	}