@charset "utf-8";

.loaderSpin {
	display: none;
}

.loaderSpinActiv,
.loaderSpinDone {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 101vh;
	background: floralwhite;
	z-index: 999999;
	overflow: hidden;
	cursor: wait;
	opacity: 0.98;
}

.loaderSpinDone {
	animation: hideshowLOADER 0.5s 0.5s linear forwards;
}

@keyframes hideshowLOADER {
	0% {
		opacity: 1;
	}

	90% {
		opacity: 0;
		z-index: 9999;
	}

	100% {
		opacity: 0;
		z-index: -9999;
	}

}

#instruction1 {
	position: absolute;
	margin: auto;
	width: 100%;
	top: 58vh;
	text-align: center;
	font-family: "Sofia";
	color: #00394d;
	font-size: clamp(16px, 4vmin, 28px);
}

#theCanvas {
	width: 100%;
	height: 100vh;
	margin: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;
	/* padding: 5vmin; */
}

.spinner {
	width: 16vmin;
	height: 16vmin;
	border-right: 0.25vmin solid black;
	border-radius: 100%;
	animation: spinRight 2s linear infinite;
	margin-bottom: 12vh;
	/*	background: rgb(230, 222, 206);
	background: radial-gradient(circle, rgba(230, 222, 206, 1) 4%, rgba(247, 241, 230, 1) 5%, rgba(247, 241, 230, 1) 100%);
*/
}

.spinner:before {
	content: '';
	width: 12vmin;
	height: 12vmin;
	display: block;
	position: absolute;
	top: calc(50% - 6vmin);
	left: calc(50% - 6vmin);
	border-left: 0.35vmin solid black;
	border-radius: 100%;
	animation: spinLeft 2s linear infinite;
}

.spinner:after {
	content: '';
	width: 5vmin;
	height: 5vmin;
	display: block;
	position: absolute;
	top: calc(50% - 2.5vmin);
	left: calc(50% - 2.5vmin);
	border-right: 0.4vmin solid #313131;
	border-radius: 100%;
	animation: spinRight 2s ease infinite;
}

@keyframes spinLeft {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(720deg);
	}
}

@keyframes spinRight {
	from {
		transform: rotate(360deg);
	}

	to {
		transform: rotate(0deg);
	}
}