@keyframes fade-out {
	0% {
	   opacity: 1;
	}

	50% {
		opacity: 1;
	 }
 
	100% {
	   opacity: 0;
	}
 }

 @keyframes bounceOut {
    0% {
        transform: scale3d(1,1,1);
		opacity: 1;
    }
    20% {
        transform: scale3d(1.2, 1.2, 1.2);
		opacity: 1;
    }

    40% {
        transform: scale3d(1.2, 1.2, 1.2);
		opacity: 1;
    }

    100% {
        transform: scale3d(0.1, 0.1, 0.1);
		opacity: 0;
    }
}

  @keyframes load-screen-squares {
	0% {
	   transform: translateX(-100px);
	   opacity: 0;
	}

	20% {
	   opacity: 1;
	}

	70% {
	   opacity: 1;
	}

	100% {
	   transform: translateX(calc(100cqw + 100px)); /* use entire width of parent using a container query */
	   opacity: 0;
	}
 }

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

	to {
	   transform: rotate(360deg)
	}
 }

 #load-screen {
	overflow: hidden;
	z-index: 99999;
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;

	background: var(--load-screen-background-color);
	color: var(--load-screen-text-color);

    display: flex;
    flex-direction: column;
    align-items: stretch;	

 }

@media (prefers-color-scheme: dark) {
	#load-screen {
		--load-screen-text-color: white;
		--load-screen-background-color: #0F0F0F;
	}
}

@media (prefers-color-scheme: light) {
	#load-screen {
		--load-screen-text-color: #0F0F0F;
		--load-screen-background-color: white;
	}
}

 body.dark #load-screen {
	--load-screen-text-color: white;
	--load-screen-background-color: #0F0F0F;
 }

body.light #load-screen {
	--load-screen-text-color: #0F0F0F;
	--load-screen-background-color: white;
 }


 body #app-load-screen {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

 }

 #load-screen.fade-out {
	opacity	: 0;
	animation: fade-out 300ms;
 }

 #load-screen .before-fade-out {
	opacity: 0;
	animation: 300ms bounceOut;
 }

 #load-screen-content {
	position: relative;
	animation: fade-in 0.25s reverse;
	top: 40%;

    display: flex;
    flex-direction: column;
    align-items: stretch;	
 }

 #load-screen-content svg {
	position: relative;

 }

 #load-screen-indicator {
	position: relative;
	margin-top: 96px;
	width: 100%;
	max-width: 600px;
	height: 12px;
  	container-type: size; /* Enable container queries on the parent */
}

#load-screen .square {
	position: absolute;
	width: 8px;
	height: 8px;
	border-radius: 8px;;
	background: black;
	animation: load-screen-squares 1.7s cubic-bezier(.28, .82, .82, .29) infinite;
	opacity: 0;
 }

 body.dark #load-screen .square {
	background: white;
 }

 #load-screen .square:nth-child(1) {
	animation-delay: 0.01s;
 }

 #load-screen .square:nth-child(2) {
	animation-delay: 0.11s;
 }

 #load-screen .square:nth-child(3) {
	animation-delay: 0.21s;
 }

 #load-screen .square:nth-child(4) {
	animation-delay: 0.31s;
 }

 #load-screen .square:nth-child(5) {
	animation-delay: 0.41s;
 }