:root{
		--pangearadioheight: 400px;
	}
	
	@keyframes example {
		0% {transform: translateX(15%) scaleY(0.5);}
		100% {transform: translateX(-85%) scaleY(0.5);}
	}
	
	@keyframes example2 {
		0% {transform: translateX(5%) scaleY(0.5);}
		100% {transform: translateX(-110%) scaleY(0.5);}
	}
	
#c4h	canvas{
		nz-index: 100;
		font-smooth: never;
		-webkit-font-smoothing : none;
		touch-action: manipulation;
		position: absolute;
		display:block;
		bottom: -20px;
		right: -20px;
	}
	
#c4h{
		/*overflow:hidden;
		position:relative;*/
		width:100%;
		min-height:100vh;
		background-image: url("/post/c4/maxresdefault.jpg");
		background-position: right center;
		background-attachment: fixed;
		-webkit-background-attachment: fixed;
		
	}
	
#c4h #tracklist .track::active{
		color:red;
	}
	
#c4h #tracklist .track::hover{
		color:blue;
	}
	
#c4h	#text a{
		pointer-events:default;
	}
	
#c4h	#text{
		border-style:		solid;
		border-width:		0px 1px 0px 0px;
		border-color:		red;
		padding:			0px 8px;
	/*	z-index:			5;*/
		background-color:	rgba(0,0,0,0.75);
		height:				100%;
		
		position:			fixed;
		/*overflow:			hidden;*/
		
		left:				0px;
		pointer-events:		none;
		text-align:			center;
		transform:			translateX(-25%)
							scaleX(0.5);
		display:			inline-block;
		/*padding-top:		var(--headerHeight);*/
	}
	
#c4h	#text h3 {
		display:			inline-block;
		line-height:80%;
		margin:0;
		font-size:124px;
		top:-70px;
		color: white;
		nfont-stretch: ultra-expanded;
		white-space:		pre;
		
		background: linear-gradient(white, red);
		color: transparent;
		display: inline-block;
		background-clip: text;
		-webkit-background-clip: text;
	}
	
#c4h	#tracklist, #c4h #tracklist *{
	}
	
#c4h	.track:hover{
		-webkit-text-fill-color: blue;
		background-clip: none;
	}
	
#c4h	.track:active{
		-webkit-text-fill-color: red;
	}
	
#c4h	#scrollArea{
	/*overflow: visible;
	overflow-y: auto;
	width: 100%;
	height:100%;
	position:absolute;*/
	
	z-index: 10;
	
	left:560px;
	
	}
	
#c4h	#scrollArea #buffer{
		height:35%;
		width:100%;
		display:block;
	}
	
#c4h	#scrollArea .blurb{
		font-size:56px;
		font-weight:bolder;
		font-family:serif;
		transform:	translateX(-330px)
					scaleX(0.6);
		color:orange;
		text-shadow:0px 0px 8px orange;
		
		-webkit-text-stroke-width: 1px;
		-webkit-text-stroke-color: yellow;
		
		line-height:0.8;
		
	}
	
#c4h	#scrollArea .blurb a{
		text-decoration:none;
	}
	
#c4h	#tracklist{
		box-sizing:border-box;
		border:1px solid red;
		text-align:left;
		position: relative;
		z-index: 10;
	
		font-family: /*monospace;*/ serif;
		font-weight: bolder;
		
		font-size:24px;
		
		line-height:20px;
		
		white-space:pre;
		nword-break: break-all;
		
		background-image:url("/post/c4/hotd.gif");
		background-size: 100% 100%;
		background-position:center center;
		
		display:inline-block;
		
		color:orange;
		color: black;
		-webkit-text-fill-color: orange; /* Will override color (regardless of order) */
		-webkit-text-stroke-width: 1px;
		-webkit-text-stroke-color: white;
		max-width:100%;
		
		overflow-y:hidden;
		overflow-x:hidden, scroll;
	}
		
#c4h #scrollArea #buffer:first-of-type{
			height: 325px;
		}
	
	@media screen and (max-width: 1200px) {
		
		#c4h	#scrollArea {
			left: auto;
			right:40px;
		}
		
#c4h	#scrollArea .blurb{
			transform:		scaleX(0.6);
			
		}
	
#c4h #tracklist .track{
		-webkit-text-fill-color: blue;
	}
		
#c4h #scrollArea #buffer{
			height:240px;
		}
		
	}
	
	@media screen and (max-width: 600px) {
		
#c4h canvas{
			bottom:-36px;
			left:-6px;
		}
		
#c4h #tracklist{
			margin-left:auto;
			margin-right:auto;
			nmargin-top:120px;
			nwidth: calc(100% - 16px);
		}
		
#c4h #text{
			position:fixed;
			text-size:20px;
			ntransform:	/*rotate(-90deg)*/
						scaleX(0.6);
			ntop:160px;
			nleft:12px;
			nwidth:calc( var(--pangearadioheight) + 40px);
		}
		
#c4h #text h3{
			font-size: 80px;
		}
		
#c4h #scrollArea{
			left:0px;
			padding-bottom:200px;
			overflow-x:hidden;
		}
		
#c4h .blurb{
			transform: scaleY(0.6);
			
		}
		
#c4h .blurb:first-of-type{
			margin-top:-40px;
			text-align:right;
			
		}
	
		#text h3, #text p{
		
		nanimation-name: example2;
		nanimation-duration: 12s;
		nanimation-iteration-count: infinite;
		nanimation-timing-function: linear;
		}
	
	}