* {
	margin: 0;
	padding: 0;
	
}

header#canvas {
	width: 95.6vw;
	height: 74.3vw;
	margin: 2vw auto 0 auto ;
	background-color: #f0eada;
}

	section#first {
		width: 12%;
		height:  100%;
		float: left;
	}
		article#longbottom {
			width: 42%;
			height: 54.5%;
			float: right;
			margin-top: 295%;

		}
			
	section#second {
		width: 16%;
		height:  100%;
		float: left;
	}

		article#longtop {
			width: 33.2%;
			height: 45.5%;
			float: left;
			margin-top: 0;
		}
		article#blacktop {
			margin-top: 39%;
		}
		article#top {
			margin-top: 39%;
		}
		article#blackmiddle {
			margin-top: 60.5%;
		}
		article#middle {
			margin-top: 60.5%;
		}
		article#bottom {
			margin-top: 60%;
			margin-left: 65%; /* How does this work? The box doesn't go out of section even when the margin-left is too big, unlike margin-top. */
		}



/* CSS NAMED COLOR CLASS */

.black {
	background-color: #252525;
}
	.black:hover {
		background-color: #ef5425;
	}
.white {
	background-color: #f0eada;
}
	.white:hover {
		background-color: #06f3cf;
	}

.box {
	width: 33.2%;
	height: 12.6%;
	float:  right;
	display:  inline-block;
}