@import url("common/general.css");
@import url("common/keyframes.css");
@import url("common/variables.css");

@import url("common/libcolors.css");
@import url("common/libobject.css");

:root {
	--SNDL-Animation_Multiplier: 64;
	--SNDL-Transition_Multiplier: 4;
	animation: SNDL-Fade_In var(--SNDL-Animation_Normal);
}
.SNDL_Copyright, .SNDL_PageLoader { display: none; }
#Background { opacity: 0.5; }


#Error {
	display: flex; justify-content: center; align-items: center; flex-direction: column;
	width: 100vw; height: 100vh;
}

/* Code */
.Code { position: absolute; }
.Code > h1 { font-size: 10vw; z-index: 1; }
.Code > h1:not(:last-child) {
	position: absolute;
}

.Code > h1:nth-child(1) {
	color: rgba(var(--SNDL-RedI_Primary), var(--SNDL-UI_Opacity_Floating));
	animation: Red_Movement 8ms infinite;
}
.Code > h1:nth-child(2) {
	color: rgba(var(--SNDL-BlueI_Primary), var(--SNDL-UI_Opacity_Floating));
	animation: Blue_Movement 9ms infinite;
}
.Code > h1:nth-child(3) {
	position: relative; z-index: 2;
	color: rgba(var(--SNDL-WhiteI_Primary), var(--SNDL-UI_Opacity_Solid));
	animation: White_Movement 8ms infinite;
}

@keyframes White_Movement {
	0% { translate: -0.2vw; }
	50% { translate: 0.2vw; }
	100% { translate: -0.2vw; }
}

@keyframes Red_Movement {
	0% { translate: -1vw; }
	100% { translate: 0; }
}
@keyframes Blue_Movement {
	0% { translate: 0.8vw; }
	100% { translate: 0; }
}


@keyframes Content_Movement {
	0% { translate: -0.075vw; }
	50% { translate: 0.075vw; }
	100% { translate: -0.075vw; }
}

/* Content */
.Content {
	margin-top: 10vw;
	opacity: 0.25;
	animation: SNDL-Fade_In var(--SNDL-Animation_XTSlow);
	transition: opacity var(--SNDL-Transition_Fast);
}
.Content * { font-size: 1vw; animation: Content_Movement 16ms infinite ease-in-out; }
#Root:has(.Code:hover) .Content { opacity: 0; }