#loading-animation {
	--hue: 223;
	--bg: hsl(var(--hue), 10%, 90%);
	--fg: hsl(var(--hue), 10%, 10%);
	--trans-dur: 0.3s;
	font-size: calc(28px + (60 - 28) * (100vw - 280px) / (3840 - 280));
	z-index:9999999999999;
}

#loading-animation {
	background: var(--background);
	color: var(--fg);
	display: grid;
	place-items: center;
	font: 1em/1.5 sans-serif;
	position: fixed;
	width: 100vw;
	height: 100vh;
	transition: background-color var(--trans-dur), color var(--trans-dur);
	top: 0;
}

#loading-animation .device {
	position: relative;
	width: 4em;
	height: 4em
}

#loading-animation .device__a,
#loading-animation .device__a-1,
#loading-animation .device__a-2,
#loading-animation .device__b,
#loading-animation .device__c,
#loading-animation .device__d,
#loading-animation .device__e,
#loading-animation .device__f,
#loading-animation .device__g {
	animation: device-a 3s cubic-bezier(0.65, 0, 0.35, 1) infinite;
	position: absolute;
	transition: background-color var(--trans-dur), box-shadow var(--trans-dur)
}

#loading-animation .device__a,
#loading-animation .device__d,
#loading-animation .device__e {
	background-color: hsl(var(--hue), 10%, 70%);
	box-shadow: 0 0 0 0.25em inset
}

#loading-animation .device__a {
	border-radius: 0.375em;
	top: 0;
	width: 4em;
	height: 2.5em;
	z-index: 1
}

#loading-animation .device__a-1,
#loading-animation .device__a-2 {
	visibility: hidden
}

#loading-animation .device__a-1 {
	animation-name: device-a-1;
	top: 2.25em;
	left: 1.5em;
	width: 1em;
	height: 0.25em
}

#loading-animation .device__a-2 {
	animation-name: device-a-2;
	top: 0.625em;
	right: 0;
	width: 0.25em;
	height: 0.75em
}

#loading-animation .device__a-1,
#loading-animation .device__a-2,
#loading-animation .device__b,
#loading-animation .device__c,
#loading-animation .device__f,
#loading-animation .device__g {
	background-color: var(--fg);
	border-radius: 0.125em
}

#loading-animation .device__b {
	animation-name: device-b;
	top: 2.25em;
	left: 1.875em;
	width: 0.25em;
	height: 1em
}

#loading-animation .device__c {
	animation-name: device-c;
	top: 3em;
	left: 1em;
	width: 2em;
	height: 0.25em
}

#loading-animation .device__d,
#loading-animation .device__e {
	left: 1.25em;
	width: 1.5em;
	height: 0.875em;
	visibility: hidden
}

#loading-animation .device__d {
	animation-name: device-d;
	border-radius: 0.375em 0.375em 0 0;
	top: 0.75em
}

#loading-animation .device__e {
	animation-name: device-e;
	border-radius: 0 0 0.375em 0.375em;
	top: 1.625em
}

#loading-animation .device__f,
#loading-animation .device__g {
	filter: blur(0.375em);
	bottom: 0;
	height: 0.25em
}

#loading-animation .device__f {
	animation-name: device-f;
	opacity: 0.5;
	left: 1em;
	width: 2em
}

#loading-animation .device__g {
	animation-name: device-g;
	opacity: 0;
	left: 0;
	width: 4em
}

@media (prefers-color-scheme:dark) {
	#loading-animation {
		--bg: hsl(var(--hue), 10%, 10%);
		--fg: hsl(var(--hue), 10%, 90%)
	}

	#loading-animation .device__a,
	#loading-animation .device__d,
	#loading-animation .device__e {
		background-color: hsl(var(--hue), 10%, 30%)
	}
}

@keyframes device-a {

	from,
	to {
		animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
		left: 0;
		width: 4em;
		height: 2.5em;
		transform: translateY(0)
	}

	12.5% {
		animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
		left: 0;
		width: 4em;
		height: 2.5em;
		transform: translateY(1.5em)
	}

	25% {
		animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
		left: 0;
		width: 4em;
		height: 2.5em;
		transform: translateY(0.375em)
	}

	37.5% {
		animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
		left: 0;
		width: 4em;
		height: 2.5em;
		transform: translateY(1.5em)
	}

	50% {
		animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
		left: 1em;
		width: 2em;
		height: 3em;
		transform: translateY(0.125em)
	}

	62.5% {
		animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
		left: 1em;
		width: 2em;
		height: 3em;
		transform: translateY(1em)
	}

	75% {
		animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
		left: 1em;
		width: 2em;
		height: 2em;
		transform: translateY(0.625em)
	}

	87.5% {
		animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
		left: 1em;
		width: 2em;
		height: 2em;
		transform: translateY(1.375em)
	}
}

@keyframes device-a-1 {
	from {
		animation-timing-function: steps(1, end);
		left: 1.5em;
		width: 1em;
		transform: translateY(0);
		visibility: hidden
	}

	12.5% {
		animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
		left: 1.5em;
		width: 1em;
		transform: translateY(0);
		visibility: visible
	}

	25%,
	37.5% {
		animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
		left: 1.5em;
		width: 1em;
		transform: translateY(-0.5em);
		visibility: visible
	}

	50%,
	62.5% {
		animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
		left: 0.875em;
		width: 0.25em;
		transform: translateY(0);
		visibility: visible
	}

	75%,
	to {
		animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
		left: 0.875em;
		width: 0.25em;
		transform: translateY(-0.5em);
		visibility: hidden
	}
}

@keyframes device-a-2 {
	from {
		animation-timing-function: steps(1, end);
		transform: translate(0, 0.375em);
		visibility: hidden
	}

	62.5% {
		animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
		transform: translate(0, 0.375em);
		visibility: visible
	}

	75%,
	87.5% {
		animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
		transform: translate(0.375em, 0);
		visibility: visible
	}

	to {
		transform: translate(0, 0.25em);
		visibility: visible
	}
}

@keyframes device-b {

	from,
	to {
		animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
		transform: translateY(0);
		visibility: visible
	}

	10%,
	12.5% {
		animation-timing-function: steps(1, start);
		transform: translateY(0.75em);
		visibility: visible
	}

	25% {
		animation-timing-function: steps(1, start);
		top: 2.25em;
		left: 1.875em;
		transform: translateY(0.75em);
		visibility: hidden
	}

	87.5% {
		animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
		transform: translateY(0.75em);
		visibility: hidden
	}
}

@keyframes device-c {

	from,
	to {
		animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
		transform: translateY(0);
		visibility: visible;
		width: 2em
	}

	10%,
	12.5% {
		animation-timing-function: steps(1, start);
		transform: translateY(0.75em);
		visibility: visible;
		width: 2em
	}

	25% {
		animation-timing-function: steps(1, start);
		top: 3em;
		left: 1em;
		width: 2em;
		transform: translateY(0.75em);
		visibility: hidden;
		width: 2em
	}

	87.5% {
		animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
		left: 1.5em;
		transform: translateY(0.75em);
		visibility: hidden;
		width: 1em
	}
}

@keyframes device-d {
	from {
		animation-timing-function: steps(1, end);
		transform: translateY(0.25em);
		visibility: hidden
	}

	62.5% {
		animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
		transform: translateY(0.25em);
		visibility: visible
	}

	75% {
		animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
		transform: translateY(-0.75em)
	}

	87.5% {
		animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
		transform: translateY(0)
	}

	to {
		transform: translateY(-0.75em)
	}
}

@keyframes device-e {
	from {
		animation-timing-function: steps(1, end);
		transform: translateY(1.5em);
		visibility: hidden
	}

	62.5% {
		animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
		transform: translateY(1.5em);
		visibility: visible
	}

	75% {
		animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
		transform: translateY(0.75em)
	}

	87.5% {
		animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
		transform: translateY(1.5em)
	}

	to {
		transform: translateY(0)
	}
}

@keyframes device-f {
	from {
		animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
		filter: blur(0.375em)
	}

	12.5% {
		animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
		filter: blur(0.1875em);
		opacity: 0.5
	}

	25%,
	to {
		filter: blur(0.375em);
		opacity: 0
	}
}

@keyframes device-g {

	from,
	12.5% {
		animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
		background-color: var(--fg);
		filter: blur(0.1875em);
		opacity: 0
	}

	25% {
		animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
		background-color: var(--fg);
		filter: blur(0.375em);
		opacity: 0.5
	}

	37.5% {
		animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
		filter: blur(0.1875em);
		opacity: 0.5;
		left: 0;
		width: 4em
	}

	50%,
	75%,
	to {
		animation-timing-function: cubic-bezier(0.33, 0, 0.67, 0);
		filter: blur(0.375em);
		opacity: 0.5;
		left: 1em;
		width: 2em
	}

	62.5%,
	87.5% {
		animation-timing-function: cubic-bezier(0.33, 1, 0.67, 1);
		filter: blur(0.1875em);
		opacity: 0.5;
		left: 1em;
		width: 2em
	}
}