body {
	background: hsl(0, 0%, 94%);
	transition: background 0.4s;
	color: hsl(0, 0%, 6%);
	display: flex;
	justify-content: center;
	align-items: center;
}

#main {
	position: relative;
	width: 60%;
	height: 100%;
	min-width: 10em;
	max-width: 75vh;
	min-height: 30em;
}

#three-container {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;

}

#three {
	position: relative;
	width: 100%;
}

#three:before {
	content: "";
	display: block;
	padding-top: 100%; /* http://www.mademyday.de/css-height-equals-width-with-pure-css.html */
}

#three > div {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.block {
	min-width: 1px;
	flex-grow: 1;
	height: 100%;
	background: rgba(0,0,0,0.2);
	transition: flex-grow, ease, 0.2s;
}

.block:hover {
	flex-grow: 8;
}

#block-2 {margin-left: 6.875%; margin-right: 6.875%;}

#three:hover #block-2 {margin-left: 2.0%; margin-right: 2.0%;}

#block-3 {
	background: rgba(0, 118, 163, 0.6);
	background: hsla(197, 100%, 32%, 0.6);
}

#footer {
	position: absolute;
	bottom: 1.25em;
	width: 100%;
}

#footer p {
	font-family: 'Arial', sans-serif;
	text-align: center;
}

#footer p, #footer a {
	color: rgb(153, 153, 153);
	color: hsl(0, 0%, 60%);
}
.copyright {
	font-size: 0.95em;
}