/* F A D E -------------------------------------------------------------------------------------- */

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

/* S L I D E ------------------------------------------------------------------------------------ */

@keyframes slideInLeft { from { left: calc(-100% + -.5rem); } to { left: 0; } }

@keyframes slideOutLeft { from { left: 0; } to { left: calc(-100% + -.5rem); } }

/* B L I N K ------------------------------------------------------------------------------------ */

@keyframes blink { 0%, 49% { opacity: 0 } 50%, 100% { opacity: 1 } }

/* F L I C K E R -------------------------------------------------------------------------------- */

.flicker {
	filter:
		drop-shadow( .0625rem 0 .0625rem hsl(320 81% 56%) )
		drop-shadow( -.125rem 0 .0625rem hsl(115 94% 70%) );
	animation: flicker 10ms infinite alternate;
}

@keyframes flicker {
	
	from { filter: drop-shadow( 1px 0 0 hsl(320 81% 56%) ) drop-shadow( -1px 0 0 hsl(115 94% 70%) ) }

	to { filter: drop-shadow( 1.5px .5px .5px hsl(320 81% 56%) ) drop-shadow( -1px -.5px .5px hsl(115 94% 70%) ) }

}

/* G L I T C H ---------------------------------------------------------------------------------- */

.glitch { position: relative; }

.glitch:before, .glitch:after {
	content: attr(data-text);
	clip: rect(0, 900px, 0, 0);
	overflow: hidden;
	position: absolute;
	top: 0;
	background: inherit;
	color: inherit;
}

.glitch:before {
	left: -2px;
	text-shadow: 1px 0 hsl(0 0% 0%);
	animation: glitch before 3s infinite linear alternate-reverse;
}

.glitch:after {
	left: 2px;
	text-shadow: -1px 0 hsl(0 0% 0%);
	animation: glitch after 2s infinite linear alternate-reverse;
}

@keyframes glitch before {

	0% { clip: rect(37px, 9999px, 39px, 0); }

	5% { clip: rect(47px, 9999px, 62px, 0); }

	10% { clip: rect(65px, 9999px, 26px, 0); }

	15% { clip: rect(75px, 9999px, 2px, 0); }

	20% { clip: rect(47px, 9999px, 11px, 0); }

	25% { clip: rect(59px, 9999px, 41px, 0); }

	30% { clip: rect(92px, 9999px, 18px, 0); }

	35% { clip: rect(19px, 9999px, 14px, 0); }

	40% { clip: rect(76px, 9999px, 77px, 0); }

	45% { clip: rect(68px, 9999px, 87px, 0); }

	50% { clip: rect(27px, 9999px, 35px, 0); }

	55% { clip: rect(59px, 9999px, 46px, 0); }

	60% { clip: rect(1px, 9999px, 45px, 0); }

	65% { clip: rect(68px, 9999px, 10px, 0); }

	70% { clip: rect(86px, 9999px, 37px, 0); }

	75% { clip: rect(16px, 9999px, 40px, 0); }

	80% { clip: rect(11px, 9999px, 48px, 0); }

	85% { clip: rect(99px, 9999px, 95px, 0); }

	90% { clip: rect(86px, 9999px, 7px, 0); }

	95% { clip: rect(43px, 9999px, 84px, 0); }

	100% { clip: rect(9px, 9999px, 73px, 0); }

}

@keyframes glitch after {

	0% { clip: rect(19px, 9999px, 11px, 0); }

	5% { clip: rect(99px, 9999px, 92px, 0); }

	10% { clip: rect(20px, 9999px, 66px, 0); }

	15% { clip: rect(96px, 9999px, 76px, 0); }

	20% { clip: rect(8px, 9999px, 83px, 0); }

	25% { clip: rect(8px, 9999px, 53px, 0); }

	30% { clip: rect(19px, 9999px, 19px, 0); }

	35% { clip: rect(17px, 9999px, 73px, 0); }

	40% { clip: rect(29px, 9999px, 43px, 0); }

	45% { clip: rect(34px, 9999px, 38px, 0); }

	50% { clip: rect(21px, 9999px, 23px, 0); }

	55% { clip: rect(73px, 9999px, 70px, 0); }

	60% { clip: rect(72px, 9999px, 24px, 0); }

	65% { clip: rect(48px, 9999px, 6px, 0); }

	70% { clip: rect(73px, 9999px, 1px, 0); }

	75% { clip: rect(62px, 9999px, 91px, 0); }

	80% { clip: rect(30px, 9999px, 60px, 0); }

	85% { clip: rect(82px, 9999px, 89px, 0); }

	90% { clip: rect(3px, 9999px, 6px, 0); }

	95% { clip: rect(33px, 9999px, 96px, 0); }

	100% { clip: rect(28px, 9999px, 65px, 0); }

}













































/* D E B U G G I N G ---------------------------------------------------------------------------- */

body > pre {
	overflow-y: auto;
	max-width: 100vw;
	max-height: 100vh;
	padding: 1rem;
	position: fixed;
	background: hsl(0 0% 0% /.9);
	border: 2px solid black;
	z-index: 999;
}

body > pre:nth-of-type(1) { left: 0; bottom: 0; }

body > pre:nth-of-type(2) { right: 0; bottom: 0; }

body > pre:nth-of-type(3) { top: 0; right: 0; }

body > pre:nth-of-type(4) { top: 0; left: 0; }

pre.router { display: block; }

pre.router span { overflow-y: auto; color: yellow; }

/* M I S C -------------------------------------------------------------------------------------- */

.❌ { background: url("/images/cross.svg") center center no-repeat; }

/* K E Y F R A M E S ---------------------------------------------------------------------------- */

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

@keyframes alert border {

	0% { border-color: hsl(0 100% 50% /.8); }

	50% { border-color: hsl(0 100% 50% /.6); }

	100% { border-color: hsl(0 100% 50% /.8); }

}

@keyframes move-ltr {

	0% { transform: translate(0px, 0px); animation-timing-function: ease-in-out; }

	50% { transform: translate(10px, 0px); animation-timing-function: ease-in-out; }

	100% { transform: translate(0px, 0px); animation-timing-function: ease-in-out; }

}

@keyframes move-rtl {

	0% { transform: translate(0px, 0px); animation-timing-function: ease-in-out; }

	50% { transform: translate(-10px, 0px); animation-timing-function: ease-in-out; }

	100% { transform: translate(0px, 0px); animation-timing-function: ease-in-out; }

}

@keyframes pulsate {

	0% { transform: scale(.1, .1); opacity: 0; }

	50% { opacity: 1; }

	100% { transform: scale(1.2, 1.2); opacity: 0; }

}