:root{
	--akumuPadding: 40px;
	--wormHeight: 150px;
	--wormSpace: calc(7px + var(--audioPlayerHeight) ); 
	--radioScrollDistance: -100%;
}

#mainLayout{
	overflow: hidden;
}

@media screen and (min-width:960px){
	
	#buffer{
		height: 118px;
	}
}

html{
	/*background: url("check.gif"), #600;
	background-size: 24px 24px;
	background-blend-mode:multiply;
	background-attachment: fixed;
	-webkit-background-attachment: fixed;
	animation: checkerscroll 2s linear 0s infinite;*/
    /*background-color: #f00;*/
   }

#title{
/*	display:none;*/
	
	position:relative;
	z-index: 10;
	
	pointer-events:none;
	font-size: calc( var(--headerHeight) / 2 );
	letter-spacing: -0.15em;
	white-space: nowrap;
	overflow:hidden;
	
	display: flex;
    align-items: center;
    justify-content: center;
}
   
   #title::before {
	display:none;
	/*background-color:rgba(200,100,255,0.5);*/
	background: radial-gradient(rgba(200,100,255,0.5), rgba(200,100,255,1));
	background-size:90vw;
	border: 4px #ccf inset;
	position: absolute;
	width: calc(100% - ( 2 * var(--headerPadding) ) );
	height: 100%;
	content: "";
	top: -4px;
	left: var(--headerPadding);
	box-sizing: border-box;
}

#title>h1{
	perspective:var(--perspective);
	transform:scale(1.2);
	margin: 0px;
}

#crisis, #realms{
	
	/*font-size:20vw;*/
	
/*	background: linear-gradient(#eee, #f44);
    background-clip: border-box;
	color: transparent;*/
	display: inline-block;
	background-clip: text;
	-webkit-background-clip: text;
}

#crisis {
/*	margin-left: -10%;
	margin-right: 10%;*/
	transform-origin:right center;
	transform: scaleY(1.5) rotateX(-15deg) rotateY(5deg);
}

#title img{display:none;
}

#realms {
	margin-left: 0px;
	transform-origin:left center;
	transform: scaleY(1.5) rotateX(15deg) rotateY(-5deg);
}
   
	#fullz{
		width:100%;
	}
	
	#buffer{
		width: 100%;
		
	}
	
	#radiotitle{
		color: #fff;
		
		z-index:100;
		
		overflow: hidden;
		position: sticky;
		display:block;
		
		top:0px;
	  max-width:100%;
	  width: 100%;
	  background: #000000;
	  font-size: 32pt;
	  white-space: pre;
	  font-family:sans-serif;
	  transform-origin: top center;
	  transform: scaleY(0.5);
	}
	
	@keyframes radioTitleScroll{
	  from{ transform: translateX(0px);}
	  to{ transform: translateX(var(--radioScrollDistance));}
	}
	
	#radiotitle p{
		transform-origin:0 0;
		animation: radioTitleScroll 8s infinite linear;
	  margin: 0px;
	  letter-spacing: 2pt;
	}
	
	#mainLayout{
		margin-right: var(--pageCrop);
		position:absolute;
		top:0px;
	}
	
	#visdec{
		max-height: 50vh;
		width: 100%;
		padding: var(--akumuPadding);
		box-sizing: border-box;
		position: relative;
		top: 0px;
		left: 0px;
		
		/*outline: 1px solid red;*/
	}
	#visdec #userCard{
		position:absolute;
		bottom: -32px;
		right: -36px;
		transform: scale(0.7) rotateZ(-8deg);
		z-index: 100;
	}
	#visdec img{
		width:100%;
		max-height: calc( 50vh - (var(--akumuPadding) * 2) );
		
		
		/*border: 3px inset gold;*/
	}
	#wormpopup{
	  position:fixed;
	  bottom: calc( ( var(--wormHeight) + 16px ) * -1 );
	  
	  left: calc( ( 100% - var(--pageCrop) ) / 2 - 300px );
	  max-width: calc( ( 100% - var(--pageCrop) ) - 40px);
	  width: 600px;
	  height: var(--wormHeight);
	  background-color: #fee;
	  
	  animation: popup 4s ease-out 99s 1 forwards;
	  
	  box-shadow: 0px 0px 12px #300;
	}
	#wormpopup form *{
	border: none;
	border-radius: 0px;
	font-family: serif;
	background: transparent;
	font-size:16pt;
	transform: scaleY(1.2);
	  margin: 3pt 0px;
	}
	#wormpopup input:focus{
	outline:none;
	}
	#wormpopup form input[type=submit]{
	  text-decoration: underline;
	  color:blue;
	}
	#wormpopup form input[type=submit]:hover{
	  text-decoration: underline;
	  color:red;
	}
	#topbar{
	  font-family:sans-serif;
	  font-weight:bold;
	  width: 100%;
	  margin: 5px 2px;
	  padding:  0px 9px;
	  background: linear-gradient(#66f, #99f);
	  box-sizing:border-box;
	}
	#typetext{
	  box-sizing: border-box;
	  font-size: 22pt;
	  font-family: serif;
	  max-width:100%;
	  margin-bottom: var(--wormHeight);
	  padding:	0
				var(--akumuPadding)
				var(--akumuPadding)
				var(--akumuPadding);
	}
	#typetext p{
	  overflow: hidden;
	  margin: 0px;
	}
	
	#typetext .letter{
	  position: relative;
	/*top: calc(1px * var(--i));*/
	  opacity: 0;
	  animation-name: typing;
	  animation-duration: 0.2s;
	  animation-timing-function: step-end;
	  animation-delay: calc(2s + (0.1s * var(--i)));
	  animation-iteration-count: 1;
	  animation-fill-mode: forwards;
	  
	  display: inline-block;
	  white-space: pre;
	  transform: scaleY(1.5) /*rotateX(20deg)*/;
	  
	  
	/*  background: linear-gradient(#c99, #fff, #c99);
	  background-clip: text;
	  -webkit-background-clip: text;
	  -webkit-text-stroke-width: 0.5px;
	  -webkit-text-stroke-color: #fcc;
	  color:transparent;*/
	}   
	#wormclaim{
	  background-color:blue;
	  text-decoration:underline;
	}
	@keyframes typing{
	 from{ opacity: 0; left:-10px;top: 0px;}
	 
	 to{ opacity: 1; left:0px; top: calc( 0.75px * sin(var(--i) * 100 ));}
	}
	@keyframes popup{
	 from{ bottom: calc( ( var(--wormHeight) * -1 ) - 16px); }
	 to{ bottom: var(--wormSpace); }
	}
	
	@keyframes vibrate{
		0%{ left:	0px;
			top:	0px;
	}	20%{left:	-3px;
		top:1px;
	}	40%{left:	1px;
			top:	3px;
	}	60%{left:	-1px;
			top:	-1px;
	}	80%{left:	3px;
			top:	-3px;
	}	100%{left:	0px;
			top:	0px;
		}
	}
	#wormpopup{
	  height:var(--wormHeight);
	}
	#wormpopup, #wormpopup div form{
	  display:flex;
	  flex-direction:column;
	}
	#wormpopup div form{
	  padding-left:15%;
	}
	#wormpopup img{
		position: relative;
		margin-top: 6px;
		margin-left: 40px;
		width: 100px;
		height: 100px;
		
		animation-name: vibrate;
		animation-duration: 0.4s;
		animation-timing-function: steps(1);
		animation-iteration-count: infinite;
	}
	#wormpopup div{
	  display:flex;
	  flex-direction:row;
	}
	
	#negative{
		pointer-events: none;
		position: fixed;
		left: 0;
		top: 0;
		width: calc( 100vw - var(--pageCrop) );
		height: 100%;
		
		-webkit-backdrop-filter: invert(1);
		backdrop-filter: invert(1);
		-webkit-mask-position: 102% 98%;
		mask-position: 102% 98%;
		-webkit-mask-type: alpha;
		mask-type: alpha;
		-webkit-mask-image: url(/post/akumu2/wom.gif);
		mask-image: url(/post/akumu2/wom.gif);
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
	}

@media screen and (max-width:960px){
	
	:root{
		--akumuPadding: 30px;
	/*	--wormHeight: 100px;*/
		--wormSpace: calc(7px + var(--audioPlayerHeight) + var(--headerPadding) * 2 ); 
	}
	
	#typetext{
		font-size:18pt;
	}
	
	#radiotitle{
		font-size: 24pt;
		letter-spacing:10pt;
	}
	
	#buffer{
	  height: calc( var(--headerHeight) + 10px );
	}
	
	#wormpopup{
		width:90%;
		left:5%;
	}
	
	#visdec #userCard{
		bottom: -80px;
		right: -120px;
		transform: scale(0.5) rotateZ(-8deg);
	}
}