@font-face {
    font-family: 'VCR OSD Mono';
      src: url('./assets/VCR_OSD_MONO_1.001.ttf') format('truetype');
}

body {
	background: url('./assets/background.png');
    background-size: cover;
    background-position: center bottom;
    background-attachment: fixed;
    font-family: 'VCR OSD Mono';
    overflow: hidden;
}

h1 {
	font-size: 80px;
	transition: font-size 3s ease;
}

#player {
	position: absolute;
	bottom: 21%;
	height: 12%;
	z-index: 1;
	overflow: hidden;
}

.background {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 25%;
	background-image: url('./assets/ground.png');
	background-size:  contain;
	background-repeat: repeat-x;
}

#devtools-tps p {
	text-decoration: underline;
	cursor: pointer;
}

#devtools-container {
	color: white;
	position: absolute;
	left: 16px;
	top: 16px;
	border: solid 4px white;
	padding: 8px;
}

#devtools-container h2 {
	text-align: center;
}

#custom-tp input {
	width: 60px;
}

#version {
	position: absolute;
	right: 16px;
	bottom: 16px;
	background-color: white;
}

.semi-visible {
	opacity: 0.5;
	transition: opacity 0.3s;
}
.semi-visible:hover {
	opacity: 1;
}
.semi-visible:hover p {
	opacity: 0.5;
	transition: opacity 0.3s;
}
.semi-visible:hover p:hover {
	opacity: 1;
}

#background-face {
	opacity: 0.2;
	transform: scale(3) translate3d(100%, 50%, 0);
	-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0));
}

#score {
	color: white;
}

#emeralds {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: absolute;
	right: 16px;
	top: 16px;
}

.emerald {
	width: 80px;
	opacity: 0;
	filter: brightness(0);
	transition: all 5s ease;
}