:root {
	--background: #344055;
	--player: #FFFFFF;
	--wall: #656567;
	--text: #DFDFE8;
	--menu: #303038;
}

html, body {
	font-family: 'ubuntu';
	height: 100%;
	width: 100%;
	margin: 0;
	overflow: hidden;
	background-image: linear-gradient(to bottom right, #6DAEDB, #173753)
}

body {
	display: grid;
	grid-template-rows: repeat(auto-fill, 4vw);
	grid-template-columns: repeat(25, 4vw);
}

#title {
	grid-area: 2 / 7 / 5 / 20;
	user-select: none;
	color: var(--text);
	font-size: 10vw;
	margin: 0;
	text-align: center;
	width: 100%;
	height: 100%;
	line-height: 12vw;
	font-family: 'ubuntu';
}


#play {
	line-height: 4vw;
	opacity: 0.8;
	user-select: none;
	font-family: 'ubuntu';
	color: var(--text);
	font-size: 3vw;
	margin: 0;
	text-align: center;
	grid-area: 7 / 11 / 7 / 16;
}

#stats {
	line-height: 4vw;
	opacity: 0.8;
	user-select: none;
	font-family: 'ubuntu';
	color: var(--text);
	font-size: 3vw;
	margin: 0;
	text-align: center;
	grid-area: 8 / 11 / 8 / 16;
}

#contact {
	line-height: 4vw;
	opacity: 0.8;
	user-select: none;
	font-family: 'ubuntu';
	color: var(--text);
	font-size: 3vw;
	margin: 0;
	text-align: center;
	grid-area: 9 / 11 / 9 / 16;
}

#coffee {
	line-height: 4vw;
	opacity: 0.8;
	user-select: none;
	font-family: 'ubuntu';
	color: var(--text);
	font-size: 3vw;
	margin: 0;
	text-align: center;
	grid-area: 10 / 10 / 10 / 17;
}

span {
	transition: 0.4s;
}

span:hover {
	transform: scale(1.05);
	opacity: 1;
	cursor: pointer;
}

#statsOverlay {
	position: absolute;
	height: 100%;
	width: 0;
	background-color: var(--wall);
	opacity: 1;
	transition: 0.4s;
}

#exit {
	display: none;
	width: 4vw;
	opacity: 0.8;
	grid-area: 1 / 25 / 1 / 25;
	transition: 0.4s;
}

#exit:hover {
	opacity: 1;
	transform: scale(1.05);
}

#info {
	user-select: none;
	font-family: 'ubuntu';
	color: var(--text);
	font-size: 3vw;
	display: none;
	text-align: center;
	position: absolute;
	left: 50%;
	top: 50%;
	transition: 0.4s;
	transform: translate(-50%, -50%);
}