#splashscreen {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transform: scale(1);
	transition: opacity 0.2s, transform 0.2s;
}

#splashscreen.visible {
	opacity: 1;
	transform: scale(1.1);
}

#splashscreen .logo {
  margin-bottom: 24px;
  width: 120px;
  height: auto;
}

#splashscreen > .spinner {
	box-sizing: border-box;
	animation: spinner 2s linear infinite;
}
@keyframes spinner {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

#splashscreen > .spinner > .ring {
	stroke: rgb(255, 241, 230);
}
#splashscreen > .spinner > .line {
	stroke: rgb(255,  91,  34);
	stroke-dasharray: 80px, 200px;
  stroke-dashoffset: 0;
	stroke-linecap: round;
	animation: circle 3s ease-in-out infinite;
}
@keyframes circle {
	0% {
		stroke-dasharray: 1px, 200px;
    stroke-dashoffset: 0;
	}
	50% {
		stroke-dasharray: 100px, 200px;
    stroke-dashoffset: -15px;
	}
	100% {
		stroke-dasharray: 100px, 200px;
    stroke-dashoffset: -125px;
	}
}

/* Media */
@media (min-width: 0px) {
	#splashscreen .logo {
		width: 60%;
	}
	#splashscreen .spinner {
		width: 10vw;
		height: 10vw;
		border-width: 4px;
	}
}

@media (min-width: 600px) {
	#splashscreen .logo {
		width: 300px;
	}
	#splashscreen .spinner {
		width: 60px;
		height: 60px;
		border-width: 4px;
	}
}

@media (min-width: 900px) {
	#splashscreen .logo {
		width: 400px;
	}
	#splashscreen .spinner {
		width: 80px;
		height: 80px;
		border-width: 6px;
	}
}

@media (min-width: 1200px) {
	#splashscreen .logo {
		width: 450px;
	}
	#splashscreen .spinner {
		width: 100px;
		height: 100px;
		border-width: 8px;
	}
}

@media (min-width: 1400px) {
	#splashscreen .logo {
		width: 450px;
	}
	#splashscreen .spinner {
		width: 120px;
		height: 120px;
		border-width: 10px;
	}
}