#splash {
	position: absolute;
	z-index: 100;
	height: 100dvh;
	width: 100dvw;
	background: bisque;
	display: flex;
	animation-name: bye-bye;
	animation-duration: 2.5s;
	animation-timing-function: ease-in-out;
	overflow: hidden;
	animation-fill-mode: forwards;

	div {
		flex-grow: 1;
		display: flex;
		justify-content: center;
		align-items: center;

		svg {
			width: 6rem;
			height: 6rem;
			background: bisque;
		}

		p {
			position: relative;
			user-select: none;
			text-align: center;
			width: fit-content;
			font-size: 4rem;
			color: black;
			font-family: 'Pacifico', cursive;

			span {
				position: absolute;
				height: 96px;
				width: 170px;
				background: bisque;
				z-index: 1;
				animation-name: rubble-enter;
				animation-duration: 600ms;
				animation-delay: 400ms;
				animation-timing-function: ease-in-out;
				animation-fill-mode: forwards;
			}
		}
	}
}

@keyframes rubble-enter {
	0% {
		transform: translateX(0px);
	}

	100% {
		transform: translateX(200%);
	}
}

@keyframes bye-bye {
	90% {
		transform: translateY(0%);
	}

	100% {
		transform: translateY(-100%);
	}
}