div#threejsContainer {
	width: 100%;
	height: 100vh;
	display: flex;
	position: absolute;
	top: 0;
	left: 0;
	align-items: center;
	justify-content: center;
	z-index: 0;
}


html {
	width: 100%;
	height: 100%;
}

body {
	padding: 0px;
	margin: 0px;
	overflow: hidden;
	width: 100%;
	height: 100%;
	font-family: 'Lexend Deca', sans-serif;;
}

.loadingScreen {
	background-color: #292524;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	flex-direction: column;
	z-index: 100;
	position: absolute;
	top: 0;
	left: 0;
}

h3 {
	font-weight: 200;
}

.lds-dual-ring {
display: inline-block;
width: 80px;
height: 80px;
}
.lds-dual-ring:after {
content: " ";
display: block;
width: 64px;
height: 64px;
margin: 8px;
border-radius: 50%;
border: 6px solid #fff;
border-color: #fff transparent #fff transparent;
animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
0% {
	transform: rotate(0deg);
}
100% {
	transform: rotate(360deg);
}
}


.m-fadeOut {
	visibility: hidden;
	opacity: 0;
	transition: visibility 0s linear 300ms, opacity 300ms;
  }
  .m-fadeIn {
	visibility: visible;
	opacity: 1;
	transition: visibility 0s linear 0s, opacity 300ms;
  }

.speedCounter {
	display: flex;
	justify-content: center;
	position: absolute;
	top: 20px;
	z-index: 5;
	color: white;
	flex-direction: column;
	row-gap: 0;
}

p {
	margin: 0;
	padding: 0;
	text-align: center;
	user-select: none;
	color: white;
	text-shadow: 0 -1px 4px #FFF, 0 -2px 10px #ff0, 0 -10px 20px #ff8000, 0 -18px 40px #F00;
}

#speedCounter {
	font-size: 4rem;
	font-weight: 600;
	line-height: 3rem;
}

#speedCounterIndicator {
	font-size: small;
	font-weight: 200;
}

#instructions {
	position: absolute;
	z-index: 5;
	font-size: small;
	left: 10px;
	bottom: 10px;
}

#credits {
	position: absolute;
	z-index: 5;
	font-size: small;
	right: 10px;
	bottom: 10px;

}

a, a:hover, a:focus, a:active {
	color: white
}