* {

	margin: 0;
	padding: 0;
	border: 0 none;

}

html, body {

	width: 100%;
	height: 100%;

}

body {

	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
	font-size: 12px;
	line-height: 1.2em;

	background: rgba(0, 7, 15, 1);

	overflow: hidden;

}

.hidden {

	display: none !important;

}

/* Start: Scrollbar styling */
body::-webkit-scrollbar,
.controls-content::-webkit-scrollbar {

	width: 8px;

}

body,
.controls-content,
.controls-embed {

	scrollbar-width: thin;
	scrollbar-color: rgba(185, 205, 255, .07) rgba(0, 0, 0, 0);

}

body::-webkit-scrollbar-track,
.controls-content::-webkit-scrollbar-track,
.controls-embed::-webkit-scrollbar-track {

	background: rgba(0, 0, 0, 0);

}

body::-webkit-scrollbar-thumb,
.controls-content::-webkit-scrollbar-thumb,
.controls-embed::-webkit-scrollbar-thumb {

	background-color: rgba(185, 205, 255, .07);
	border-radius: 6px;
	border: 1px solid rgba(185, 205, 255, 0);

}
/* End: Scrollbar styling */

#scene {

	width: 100%;
	height: 100%;

	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

	background:
		radial-gradient(circle at 48% 42%, rgba(48, 71, 103, .34) 0, rgba(9, 19, 33, .2) 38%, rgba(3, 6, 12, .92) 78%),
		linear-gradient(145deg, rgba(17, 28, 48, 1), rgba(3, 6, 12, 1));

	touch-action: none;
	user-select: none;

}

#scene::after {

	content: "";

	position: absolute;
	z-index: 0;
	inset: 0;

	background:
		radial-gradient(ellipse at 50% 88%, rgba(255, 174, 105, .1), transparent 38%),
		radial-gradient(circle at 84% 15%, rgba(83, 122, 205, .12), transparent 30%);

	pointer-events: none;

}

#scene canvas {

	position: relative;
	z-index: 1;

	display: block;
	width: 100%;
	height: 100%;

	opacity: 0;
	transition: opacity .7s ease;
	cursor: grab;

}

#scene.is-ready canvas {

	opacity: 1;

}

#scene canvas:active {

	cursor: grabbing;

}

.scene-loader {

	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;

	width: 54px;
	height: 54px;

	transform: translate(-50%, -50%);
	opacity: 1;

	transition:
		opacity .42s ease,
		visibility 0s linear 0s;

	pointer-events: none;

}

.scene-loader::before,
.scene-loader::after {

	content: "";

	position: absolute;

	border: 1px solid rgba(255, 208, 111, .14);
	border-top-color: rgba(255, 220, 145, .9);
	border-right-color: rgba(255, 190, 72, .38);
	border-radius: 50%;

	animation: scene-loader-spin 1.35s cubic-bezier(.55, .15, .45, .85) infinite;

}

.scene-loader::before {

	inset: 0;

	box-shadow:
		0 0 18px rgba(255, 186, 67, .08),
		inset 0 0 14px rgba(255, 208, 111, .04);

}

.scene-loader::after {

	inset: 10px;

	opacity: .72;

	animation-duration: .92s;
	animation-direction: reverse;

}

.scene-loader span {

	position: absolute;
	top: 50%;
	left: 50%;

	width: 5px;
	height: 5px;

	background: rgba(255, 222, 151, .92);
	border-radius: 50%;
	box-shadow:
		0 0 8px rgba(255, 200, 83, .8),
		0 0 20px rgba(255, 177, 48, .36);

	transform: translate(-50%, -50%);

	animation: scene-loader-pulse 1.15s ease-in-out infinite;

}

#scene.is-ready .scene-loader {

	visibility: hidden;
	opacity: 0;

	transition:
		opacity .42s ease,
		visibility 0s linear .42s;

}

@keyframes scene-loader-spin {

	to {

		transform: rotate(360deg);

	}

}

@keyframes scene-loader-pulse {

	0%,
	100% {

		transform: translate(-50%, -50%) scale(.72);
		opacity: .46;

	}

	50% {

		transform: translate(-50%, -50%) scale(1.15);
		opacity: 1;

	}

}

@media (prefers-reduced-motion: reduce) {

	.scene-loader::before,
	.scene-loader::after {

		animation-duration: 2.8s;

	}

	.scene-loader span {

		animation: none;

	}

}