:root{
	--textcolor: #fff;
}

@keyframes unSpin{
	from{transform: rotateY(0deg);}
	to	{transform: rotateY(360deg);}
}

@media screen and (orientation: portrait) {
	#userCard{
		transform: scale(0.35) rotate(-4deg);
		transform-origin: top right;
		right: 0;
		top:10vw;
	}
	
	#titleContainer{
		width:100%;
	}
	
	#megatitle{
		
		font-size: calc(13vw);
	}
	
	#rotator{
		
		width:	95vw;
		height:	95vw;
	}
	
	#hzinfo{
		font-size:1.2em;
		text-shadow: -0.2px -0.2px 0 var(--textcolor), 0.2px -0.2px 0 var(--textcolor), -0.2px 0.2px 0 var(--textcolor), 0.2px 0.2px 0 var(--textcolor), 0px 0.2px 0.4px #ffffff33;
	}
}

@media screen and (orientation: landscape) {
	#userCard{
		transform: scale(0.7) rotate(-3deg);
		top: calc( -40px + (11vw / 2) );
		right:-5.75vw;
	}
	
	#titleContainer{
		width:calc( 100% - 340px );
	}
	
	#megatitle{
		font-size: calc(10vw);
	}
	
	#rotator{
		width:	70vh;
		height:	70vh;
	}
	
	#hzinfo{
		font-size: 30px;
		text-shadow: -1px -1px 0 var(--textcolor), 1px -1px 0 var(--textcolor), -1px 1px 0 var(--textcolor), 1px 1px 0 var(--textcolor), 0px 2px 4px #ffffff33;
	}
}

html{
	background-color: black;
}
	
	#rotator{
		position:absolute;
		left:50vw;
		top: 50vh;
		
		transform: translate(-50%, -50%);
		
		perspective: 1000px;
	}
	
	.uns{
		width:	100%;
		height:	100%;
		position:absolute;
		
		mask-image: var(--imgurl);
		-webkit-mask-image: var(--imgurl);
		mask-size: contain;
		-webkit-mask-size:contain;
		animation-name: unSpin;
		animation-duration: var(--time);
		animation-timing-function: linear;
		animation-iteration-count: infinite;
/*		animation-delay: calc( -2.5s * var(--i) );*/
/*		transform: rotateY(calc(40deg * var(--i)));*/
background: linear-gradient(#0000ffcc, #ffffffff);
		backdrop-filter: invert(1);
		z-index: 1000000;
	}
	
	#viewport{
		position: relative;	
		z-index: 1000000;
	}
	
	#decor{
		position:fixed;
		width: calc(100vw - var(--pageCrop));
		background: linear-gradient(#000, #333, #000);
	}
	
	#userCard{
		position:absolute;
		transition: transform 0.1s;
	}
	
	#hzinfo{
		position:absolute;
		top: calc( 16vw );
		
		max-width: 40%;
		
		z-index: 100;
		transform: scaleY(2);
		transform-origin: top;
		font-family: sans-serif;
		padding: 0 0 10vh 0;
		margin: -30px 0 0 0;
		line-height:0.75em;
		list-style-type: cjk-ideographic;
	}
	
	#smol{
		font-size: 0.75em;
		color: red;
		position: relative;
		bottom:0.2em;
		white-space: pre;
	}
	
	#hzinfo *{
		margin: 0;
		padding: 0;
	}
	
	#hzinfo ul{
	n	list-style: none;
		list-style-type: inherit;	
	}
	
	#hzinfo ul li{
		margin-left:60px;
	}
	
	#hzinfo ul li:hover{
		color: red;
	}
	
	#titleContainer{
	padding-top:2.25vw;
	padding-left:1.125vw;
	position: absolute;
	width:100%;
	box-sizing: border-box;
	transition: width 0.1s;
	}
	
#megatitle{
	background-image: url("flag.jpg");
	background-size: 100% 70%;
	background-repeat: repeat;
	margin: 0;
	transform: scaleY(2);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-position: center;
	letter-spacing: -0.1em;
}
#console{
	font-family: monospace;
	nposition:absolute;
	top: 0;
	left: 0;
	}