.load {
	position: fixed;
	z-index: 999;
	height: 100dvh;
	width: 100dvw;
	--loadspin: 0.5s;
	color: var(--white);
	display: grid;
	place-items: center;
	animation: disappear 0.8s 2s forwards;
		h1 {
			font-family: Gesit Mono;
			mix-blend-mode: difference;
			font-size: 10vw;
			outline: none;
			position: absolute;
			margin: 0;
			z-index: 4;
		}
		
		h2 {
			font-family: Departure;
			font-size: 3vw;
			text-transform: uppercase;
			z-index: 4;
		}
		
		.one {
			animation: swap1 var(--loadspin) ease-in infinite;
			z-index: 4;
		}
		
		.two {
			animation: swap2 var(--loadspin) ease-in infinite;
			z-index: 4;
		}
		
		.three {
			animation: swap3 var(--loadspin) ease-in infinite;
			z-index: 4;
		}
		
		.four {
			animation: swap4 var(--loadspin) ease-in infinite;
			z-index: 4;
		}
}

@keyframes disappear {
  to {
	  display: none;
	  scale: 0;
	  opacity: 0;
	}
}

@keyframes swap1 {
	0%, 24% {visibility: visible;}
	25%, 100% {visibility: hidden;}
}

@keyframes swap2 {
	0%, 24% {visibility: hidden;}
	25%, 49% {visibility: visible;}
	50%, 100% {visibility: hidden;}
}

@keyframes swap3 {
	0%, 49% {visibility: hidden;}
	50%, 74% {visibility: visible;}
	75%, 100% {visibility: hidden;}
}

@keyframes swap4 {
	0%, 74% {visibility: hidden;}
	75%, 100% {visibility: visible;}
}

.bgsvg {
	width: 100vw;
	height: 100vh;
	scale: 1.1;
	position: fixed;
	z-index: 3;
	animation: disappearsvg 0s 4s forwards;
}

.bgsvg-mobile {
	width: 100vw;
	height: 100vh;
	scale: 1.2;
	opacity: 0;
	position: fixed;
	z-index: 3;
	animation: disappearsvg 0s 4s forwards;
}

@keyframes disappearsvg {
  to {
	  visibility: hidden;
	}
}



@media (width <= 1025px) {
	.load h2 {
		font-size: 8vw;
	}
	.load h1 {
		font-size: 30vw;
	}
	.bgsvg {
		display: none;
	}
	.bgsvg-mobile {
		opacity: 1;
	}
}