:root{
	--bobHeight: -15px;
}

@keyframes threeDSpin{
	0%	{transform: translateZ(100px) rotateY(-000deg);}
	50%	{transform: translateZ(100px) rotateY(-180deg);}
	100%{transform: translateZ(100px) rotateY(-360deg);}
}

@keyframes layering{
	0%	{opacity:0;}
	25%	{opacity:0;}
	30%	{opacity:1;}
	70% {opacity:1;}
	75% {opacity:0;}
	100%{opacity:0;}
}

@keyframes bobbing{
				0%	{top:  5px;}
				25%	{top:  var(--bobHeight);}
				50% {top:  5px;}
				75% {top:  var(--bobHeight);}
				100%{top:  5px;}
}

*{
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
}

html{
	
	perspective:2000px;
	
	height:100%;
	
	background-color: #77f;
	background-image:url("/images/assets/background/sadface.gif");
	background-blend-mode: hard-light;
	
	animation-name: bgLeftRight, bgScrollDown;
	animation-duration: 4s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out, linear;
	
}
			
body{
	max-width: calc(100% - var(--pageCrop));
	position: relative;
	height: 100%;
	overflow: hidden;
}

#error{
	
	position:absolute;
	top:calc(50% - 256px);
	left:calc(50% - 280px);
	transition: 
		top 0.2s,
		left 0.2s;
}

#error img{
	width:512px;
	height:512px;
	
	position:relative;
	
	border: 4px outset #f77;
	left:calc(50% - 256px);
	top:calc(50% - 256px);
	
	z-index: 0;
	
	transition:
		width 0.2s,
		height 0.2s;
}

#errorMessage{
	
	margin: 0px;
	font-size:90px;
	font-family:impact;
	text-align:center;
   -webkit-text-stroke: 1px white;
	
	position: absolute;
	top:calc(50%);
	left:calc(50%);
	
	perspective:500px;
				
	opacity: 0;
	transition: font-size 0.2s;
	
}

#errorMessage:has(.letterContainer){
	opacity: 1;
}

.letterContainer{
	
	transform-origin:center;
	transform-style: preserve-3d;
	
	position:absolute;
  
	transform-origin:center;
	transform-style: preserve-3d;
	
	animation-name: threeDSpin /*layering,*/;
	animation-duration: 8s;
	animation-iteration-count: infinite;
	animation-timing-function: linear /*steps(4,end),*/;
	animation-delay:calc(0.15s * var(--i));
}

.letter{
	
	opacity:0;
	
	position:absolute;
	
	animation-name: layering, bobbing;
	animation-duration: 8s, 4s;
	animation-iteration-count: infinite;
	animation-timing-function: linear, ease-in-out;
	animation-delay:calc(0.15s * var(--i));
	
	
	
	background: linear-gradient(#f33, #eef, #f33);
	background-clip: text;
   -webkit-background-clip: text;
	color: transparent;
	
	
	transform-origin:center;
	transform-style: preserve-3d;
	transform: translateZ(-256px) translateX(0px) translateY(0px) rotateY(calc(180deg));
}

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: portrait) {
	
	:root{
		--bobHeight: 15px;
	}
	
	#error{
		
		position:absolute;
		top:calc(50%  - 128px);
		left:calc(50% - 128px);
	}

	#error img{
		width:256px;
		height:256px;
		border-width:2px;
		left:calc(50% - 128px);
		top:calc(50% - 256px);
	}
	
	#error #errorMessage{
		font-size:40px;
	}
	
	.letter{
		transform: translateZ(-128px) translateX(0px) translateY(0px) rotateY(calc(180deg));
	}
};