* {
	margin: 0;
	padding: 0;
}

main#canvas {
	width: 150vw;
	height: 100vw;
	background-color: lightsalmon;
	padding-top: 2%;
	padding-left: 2%;
}

	section {
		width: 98.5%;
		height: 98%;
		background-color: salmon;
		float: left;
	}

		article#lightpink {
			width: 6%;
			height: 100%;
			background-color: lightpink;
			float: left;
			margin-left: 4.5%;
		}

		article#pink {
			width: 4.5%;
			height: 45%;
			background-color: pink;
			float: left;
		}

		article#hotpink {
			width: 4.5%;
			height: 54.89999%;
			background-color: hotpink;
			float: left;
			margin-top: 29.88887%;
		}

		article#deeppink {
			width: 4.5%;
			height: 100%;
			background-color: deeppink;
			float: left;
		}

		article#magenta1 {
			width: 4.5%;
			height: 8%;
			background-color: magenta;
			margin-left: 24%;
		}

		article#magenta2 {
			width: 4.5%;
			height: 12%;
			background-color: magenta;
			margin-left: 24%;
			margin-top: 8.5%;
		}

		article#magenta3 {
			width: 4.5%;
			height: 12%;
			background-color: magenta;
			margin-left: 24%;
			margin-top: 8.5%;
		}

		article#magenta4 {
			width: 4.5%;
			height: 29.5%;
			background-color: magenta;
			margin-left: 24%;
			margin-top: 8.5%;
		}

figcaption {
	width: 68.6vw;
	margin: 0.5vw auto 0 auto;
	font-size: 12pt;
	text-align: right;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}


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

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

#hotpink:hover {
	background-color: darkgreen;
}

#deeppink:hover {
	background-color: lawngreen;
}

#magenta1:hover {
	background-color: limegreen;
}

#magenta2:hover {
	background-color: palegreen;
}

#magenta3:hover {
	background-color: lightgreen;
}

#magenta4:hover {
	background-color: forestgreen;
}