html, body {
	margin: 0;
	padding:  0;
	width: 100%;
	height: 100%;
	font-family: "Roboto Condensed", "Arial", "Helvetica";
}

.wrapper {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#hex {
	color: #ffffff;
	font-size: 10vmin;
}

#info-text {
	color: #ffffff;
	width: 50%;
	text-align: center;
	opacity: 0;
	transition: all 0.5s ease-in-out;
	z-index: 2;
}

#info-hover {
	float: right;
}

#hex:hover + #info-text {
	opacity: 1;
}

footer {
	bottom: 0;
	background-color: inherit;
	position: fixed;
	padding: 2%;
	color: #ffffff;
	width: 90%;
	font-size: 2vmin;
}

footer > a {
	color: #ffffff;
	text-decoration: none;
	position: relative;
}

footer > a:hover {
	color: #ffffff;
}

footer > a:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 1px;
	bottom: 0;
	left: 0;
	background-color: #ffffff;
	visibility: hidden;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transition: all 0.5s ease-in-out 0s;
	transition: all 0.5s ease-in-out 0s;
}

footer > a:hover:before {
	visibility: visible;
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
}