:root{
	
	--headerHeight: 60px;
	
	--audioPlayerHeight: 24px;
	
	--noiseAddress: url('/images/assets/background/marble.gif');
	
	/*theme one*/
	
	--headerColour: #f99;
	--headerDarker: #933;
	
	--menuColour: #f9f;
	--menuDarker: #939;
	
	--footerColour: #9f9;
	--footerDarker: #393;
	
	--backgroundBlend: multiply;
	
	/*final*/
	
	--headerColour: #f99;
	--headerDarker: #933;
	
	--menuColour: #f9f;
	--menuDarker: #939;
	
	--footerColour: #9f9;
	--footerDarker: #393;
	
	--backdropFilter: initial;
	
}

[data-theme="dark"] {
	
	--headerColour: #333;
	--headerDarker: #999;
	
	--menuColour: #333;
	--menuDarker: #999;
	
	--footerColour: #333;
	--footerDarker: #999;
	
	--backgroundBlend: color-burn;
}

[data-theme="smoke"] {
	
	--headerColour: #393333cc;
	--headerDarker: #c9c0c0c0;
	
	--menuColour:	#393333cc;
	--menuDarker:	#c9c0c0c0;
	
	--footerColour: #393333cc;
	--footerDarker: #c9c0c0c0;
	
	--noiseAddress: none;
	--backdropFilter: blur(2px);
	
}



[data-theme="predator"] {
	
	--headerColour: #ffffff00;
	--headerDarker: #ffffff00;
	--menuColour:	#ffffff00;
	--menuDarker:	#ffffff00;
	--footerColour: #ffffff00;
	--footerDarker: #ffffff00;
	
	--noiseAddress: none;
	--backdropFilter: invert(100%) blur(2px);
	
}

body{
	margin:0px;
	/*height:200vh;*/
}
.italic{
	font-style: italic;
	position: relative;
	top: 3px;
}

	/* ---------------------------AUdio BitSZ---------------*/


#postInfo{
	z-index: 999;
}

#postInfoContainer{
	
}

.progButton{
	width:50px;
	height:50px;
	background-color:blue;
	box-sizing:border-box;
	border-size: 2px;
	border-color: white gray gray white;
	border-style:solid;
	
}

.progButton#prev{
	
}

#postInfo{
	display: inline-block;
	position: fixed;
	bottom: 0px;
	perspective: var(--perspective);
	position: fixed;
	width: 100%;
	
}

#magazineNavigation{
	
}

#postInfo #prev{
	position:
}

#postInfo #next{
	position:fixed;
	right:var(--sidebarWidth);
}

#info{
	display:flex;
	flex-grow: 1;
	flex-direction: column;
	width: 90%;
	/*font-size: 40px;*/
}

#info *{
	/*margin:0px;*/
	z-index: 1;
}

#info p{
	width:100%;
	margin: 0px;
	margin-top:2px;
	background: linear-gradient(#e66465, #9198e5);
	box-sizing:border-box;
	border-size: 2px;
}

#info h2 {
	margin: 0px;
	transform: translateZ(20px);
	flex-grow: 2;
	transform: scalex(0.5);
	line-height: 0.8em;
	font-size: 3em;
	width: 150%;
	transform-origin: left;
}

/*#title{
	font-size:20px;
}*/

#userCard{
	/*transform:	scale(0.5)
				rotateZ(85deg)
				rotateX(30deg); 
	
	
	position: absolute;
	left: 0px;
	transform-origin: left top;
	bottom: -100px;*/
	
	/*opacity: 0.5;*/
}

main{
	
	position:relative;
	width:calc( 100% - var(--pageCrop) );
}

/*main>*:last-child{
	padding-top:var(--headerHeight);
}*/
/* --------------------------------------------------------------------------

					Animation

-------------------------------------------------------------------------- */


/*------------- For postInfo...
*/

#postInfo.hiding{
	animation: 			01.0s cubic-bezier(.17,.84,.44,1) 0s 1 forwards 			infoOut;
	-webkit-animation: 	01.0s cubic-bezier(.17,.84,.44,1) 0s 1 forwards 	infoOut;
}

#postInfo.showing{
	animation: 			01.0s cubic-bezier(.17,.84,.44,1) 0s 1 backwards 		infoIn;
	-webkit-animation: 	01.0s cubic-bezier(.17,.84,.44,1) 0s 1 backwards infoIn;
}

@keyframes infoOut{
	from {	transform: translateY(0px	);}
	to {	transform: translateY(250px	);}
}

@keyframes infoIn{
	from {	transform: translateY(250px	);}
	to {	transform: translateY(0px	);}
}