body {
	margin: 0;
	background-color: #2a2a2a; /* same as scene.background, so there is no flash before the canvas paints */
	color: #fff;
	font-family: 'Oxygen', sans-serif;
	font-size: 13px;
	line-height: 24px;
	overscroll-behavior: none;
}

a {
	color: rgb(233, 233, 233);
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

button {
	cursor: pointer;
}
/* 
#info {
	position: absolute;
	bottom: 0px;
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	text-align: left;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	pointer-events: none;
	z-index: 1; 
} */

a, button, input, select {
	pointer-events: auto;
}

.dg.ac {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	z-index: 2 !important; /* TODO Solve this in HTML */
}

/* Loading state -------------------------------------------------------- */

/* Sits directly over the empty stage: the ground plane, fog, and background
   render from the first frame, and the spinner floats on top of them. No
   scrim, and no pointer capture, so the page chrome stays live throughout. */

#loading {
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: transparent;
	pointer-events: none;
	transition: opacity 0.6s ease;
}

#loading.hidden {
	opacity: 0;
}

#loading .label {
	margin-top: 28px;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #818181;
}

#loading .error {
	color: #b95c4e;
}

/* Two-bounce spinner, adapted from SpinKit (tobiasahlin.com/spinkit) */

.spinner {
	width: 40px;
	height: 40px;
	position: relative;
	text-align: center;
	-webkit-animation: sk-rotate 2.0s infinite linear;
	animation: sk-rotate 2.0s infinite linear;
}

.dot1, .dot2 {
	width: 60%;
	height: 60%;
	display: inline-block;
	position: absolute;
	top: 0;
	background-color: #e9e9e9;
	border-radius: 100%;
	-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
	animation: sk-bounce 2.0s infinite ease-in-out;
}

.dot2 {
	top: auto;
	bottom: 0;
	-webkit-animation-delay: -1.0s;
	animation-delay: -1.0s;
}

@-webkit-keyframes sk-rotate { 100% { -webkit-transform: rotate(360deg) }}
@keyframes sk-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}

@-webkit-keyframes sk-bounce {
	0%, 100% { -webkit-transform: scale(0.0) }
	50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
	0%, 100% {
		transform: scale(0.0);
		-webkit-transform: scale(0.0);
	} 50% {
		transform: scale(1.0);
		-webkit-transform: scale(1.0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.spinner { animation: none; -webkit-animation: none; }
	.dot1, .dot2 { animation-duration: 3s; -webkit-animation-duration: 3s; }
}

#notSupported {
	width: 50%;
	margin: auto;
	background-color: #f00;
	margin-top: 20px;
	padding: 10px;
}

.sidebar {
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 3;
	top: 0;
	left: 0;
	background-color: #111;
	overflow-x: hidden;
	transition: 0.5s;
	padding-top: 76px;
}

.sidebar a {
	padding: 8px 8px 8px 32px;
	text-decoration: none;
	font-size: 23px;
	color: #818181;
	display: block;
	transition: 0.3s;
}

.sidebar h3 {
	padding: 8px 8px 8px 32px;
	text-decoration: none;
	font-size: 23px;
	font-weight: 400;
	color: #818181;
	display: block;
	transition: 0.3s;
}

.sidebar p {
	padding: 0px 0px 0px 32px;
	text-decoration: none;
	font-size: 12px;
	color: #818181;
	display: inline block;
	transition: 0.3s;
}

.sidebar p .threejs {
	padding: 0px 8px 0px 0px;
	text-decoration: none;
	font-size: 12px;
	/* color: #818181; */
	display: inline;
	transition: 0.3s;
}

.sidebar a:hover {
	color: #f1f1f1;
}

.sidebar .closebtn {
	position: absolute;
	top: 0;
	right: 25px;
	font-size: 36px;
	margin-left: 50px;
}

.openbtn {
	font-size: 16px;
	cursor: pointer;
	background-color: #111;
	color: white;
	padding: 10px 15px;
	border: none;
}

.openbtn > span {
	padding: 0 0 0 12px;
}

.openbtn:hover {
	background-color: #444;
}

#main {
	position: absolute;
	z-index: 2;
	transition: margin-left .5s;
	padding: 32px;
}

h2 {
	/* font-family: 'Open Sans', sans-serif; */
	font-size: 23px;
	font-weight: 300;
	padding-top: 12px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
	.sidebar {padding-top: 15px;}
	.sidebar a {font-size: 16px;}
}