:root {
	--background: #222;
	--hex-width: 17.2vw;
	--hex-height: calc(var(--hex-width) / 0.8660254037844386);
	--hex-border: 0px;
}

body {
	text-align: center;
	background: var(--background);
	color: #ccc;
	font-family: fira-sans, sans-serif;
}
.title {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 0 2em 1em 2em;
	background: rgba(0, 0, 0, 0.7);
}
h1 {
	color: #fff;
}

a {
	color: #ccc;
	text-decoration: none;
	font-weight: bold;
}

a:hover {
	color: #fff;
}

.hex-grid {
	position: fixed;
	top: calc(var(--hex-height) / -3);
	left: calc(var(--hex-width) / -1.7);
	overflow:hidden;
	width: 120%;
	height: 120%;
}


.hex {
	width: 100%;
	min-width: 100%;
	height: 100%;
	display: block;
	transition: .3s;
	position: relative;
	background-size: cover;
}

.hex-background {
	width: 100%;
	min-width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: block;
	transition: .3s;
	position: absolute;
	background-size: cover;
}
.hex-content {
	width: 100%;
	min-width: 100%;
	height: 100%;
	top: 25%;
	display: block;
	transition: .3s;
	position: absolute;
	font-weight: normal;
	opacity: 0;
}
.hex:hover .hex-content,
.hex:focus .hex-content {
	opacity: 100%;
}

.hex {
	display: block;
	padding: var(--hex-border);
	width: var(--hex-width);
	min-width: var(--hex-width);
	height: var(--hex-height);
	clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
	position: relative;
}

.hex:hover .hex-background,
.hex:focus .hex-background {
	transform: scale(1.1);
	filter: blur(2px) brightness(60%);
}

.line {
	display: flex;
	margin-bottom: calc(var(--hex-height) / -4 - var(--hex-border));
}

.line-odd {
	padding-left: calc(var(--hex-width) / 2 + var(--hex-border));
}