html, body {
	overflow: hidden;
	user-select: none;
}
.hex {
	background-color: #430;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 33vh;
	position: absolute;
	text-align: center;
	text-wrap-style: balance;
	width: 38vw;
	clip-path: polygon(20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%);
}
.hint {
	padding: 0 2vw;
}
.letter {
	background-color: #444;
	border: 2px solid black;
	border-radius: 5px;
	color: white;
	cursor: pointer;
	height: 2em;
	line-height: 2em;
	position: absolute;
	width: 2em;
	z-index: 1;
}
.letter:hover {
	background-color: #555;
}
.letter:active {
	background-color: #666;
}
.letter.selected {
	background-color: #888;
}
.start {
	color: gold;
	font-size: 4vh;
	height: 4vh;
	line-height: 2em;
	pointer-events: none;
	position: absolute;
	width: 4vh;
	transform: translateY(-2.5vh);
	z-index: 2;
}
.category, .difficulty {
	color: grey;
	display: block;
	font-size: 67%;
}
.category::before {
	color: skyblue;
	content: 'Category: ';
}
.difficulty::before {
	color: gold;
	content: 'Difficulty: ';
}
#controls {
	display: flex;
	height: 14vh;
	flex-direction: column;
	font-size: 75%;
	left: 0;
	padding: 1vh 1vw;
	position: absolute;
	top: 0;
	width: 30vw;
}
/* horizontal alignment of hexes */
#hex1, #hex0, #hex4 {
	left: 31vw;
}
#hex5, #hex6 {
	left: 0;
}
#hex2, #hex3 {
	left: 62vw;
}
/* vertical alignment of hexes */
#hex1 {
	top: 0;
}
#hex2, #hex6 {
	top: 16.67vh;
}
#hex0 {
	top: 33.33vh;
}
#hex3, #hex5 {
	top: 50vh;
}
#hex4 {
	top: 66.67vh;
}
/* directions */
.direction0, .direction3 {
	left: 45%;
}
.direction1, .direction2 {
	right: 12%;
}
.direction1, .direction5 {
	top: 20%;
}
.direction2, .direction4 {
	bottom: 20%;
}
.direction4, .direction5 {
	left: 12%;
}
.direction0 {
	top: 0;
}
.direction3 {
	bottom: 0;
}