/*
       .__                                            .__        
_____  |  |    ____   ______________  _______    _____|__| ____  
\__  \ |  |   / ___\_/ __ \_  __ \  \/ /\__  \  /  ___/  |/  _ \ 
 / __ \|  |__/ /_/  >  ___/|  | \/\   /  / __ \_\___ \|  (  <_> )
(____  /____/\___  / \___  >__|    \_/  (____  /____  >__|\____/ 
     \/     /_____/      \/                  \/     \/           
*/

body {
	background-color: grey;
}

header#canvas {
	width: 33vw;
	height: 35vw;
	margin: 11.5vw;
	margin-left: 4.5vw;
	background-color: white;
}

	header#canvas:hover {
		width: 33vw;
		height: 35vw;
		margin: 11.5vw;
		margin-left: 4.5vw;
		background-color: black;
	}

section#top {
	background-color: darkgray;
	width: 100%;
	height: 1.5%;
}

	section#top:hover {
		background-color: hotpink;
		width: 100%;
		height: 1.5%;
	}

section#second-element {
	background-color: #f2f2f2;
	width: 13.75%;
	height: 9%;
	margin-top: 7.25%;
	margin-left: 9.75%;
}

	section#second-element:hover {
		background-color: blue;
		width: 13.75%;
		height: 9%;
		margin-top: 7.25%;
		margin-left: 9.75%;
	}

section#third-element {
	background-color: lightgray;
	width: 100%;
	height: 9%;
	margin-top: 8%
}

	section#third-element:hover {
		background-color: yellow;
		width: 100%;
		height: 9%;
		margin-top: 8%
	}

section#fourth-element {
	background-color: orangered;
	width: 100%;
	height: 9.5%;
	margin-top: 11%;
}

	section#fourth-element:hover {
		background-color: purple;
		width: 100%;
		height: 9.5%;
		margin-top: 11%;
	}

section#fifth-element {
	background-color: lightgray;
	width: 100%;
	height: 9%;
	margin-top: 12%
}

	section#fifth-element:hover {
	background-color: blue;
	width: 100%;
	height: 9%;
	margin-top: 12%
}

section#sixth-element {
	background-color: hsl(60, 100%, 80%);
	width: 100%;
	height: 26%;
}

	section#sixth-element:hover {
		background-color: hotpink;
		width: 100%;
		height: 26%;
	}

article#seventh-element {
	background-color: ghostwhite;
	width: 13.75%;
	height: 38%;
	margin-top: 9%;
	margin-left: 9%;
	float: left;
}

	article#seventh-element:hover {
		background-color: purple;
		width: 13.75%;
		height: 38%;
		margin-top: 9%;
		margin-left: 9%;
		float: left;
	}


section#last-element {
	background-color: darkgray;
	width: 100%;
	height: 1.5%;

}

	section#last-element:hover {
		background-color: yellow;
		width: 100%;
		height: 1.5%;

	}

/*figure#light-gray-square {
	background-color: lightgray;
	width: 13.75%;
	height: 40%;	
}
*\