@font-face{
	font-family:"AvQest";
    src: url('/font/AvQest.ttf');
}

*, *:before, *:after {
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	zoom: reset;
}


body{
	overflow-y: hidden;
	overflow-x: hidden;
	padding:0px;
	margin:0px;
	width:100vw;  
	zoom: reset;
    background-color:black;
	xfont-family: consolas, monospace;
	user-select:none;
	user-drag:none;
	
}


#canvas {
	xborder:1px solid lime;
	margin:30px auto auto auto;
	
	display: block;
	xleft:-0.5;
	xtop:-0.5;
    max-width:100vw;
    max-height:100vh;
	xwidth:100vw;
	xheight:1000px;
	cursor: none;

	position:absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}




.sidebar {
	xborder:1px solid red;

	position:absolute;
	height:100vh;
	width:50vw;
	z-index:1;

	background-color:rgb(17, 17, 17);
	background-image:url('../img/huge_stone_dark.jpg');
	xbackground-image:url('../img/gran_black.jpg');
	background-position: center;
	background-size:cover;

	box-shadow: inset 0px 0px 10px 10px rgba(0,0,0, 0.8);
			

	transition: width 0.2s ease-in;

	ximage-rendering: pixelated;
	xborder-width:20px;
	border-style: solid;

	border-image-source: url('../img/border_big_silver.png');
	border-image-slice: 150;
	border-image-width: 25;
	border-image-outset: 0;
	border-image-repeat: round;
}

x.sidebar:before {
    content: "";
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    border: 10px solid grey;
    border-style: outset;
}

#left.sidebar {
	xbackground-color:green;
	xbox-shadow: 50px 5px 50px rgba(0,0,0, 0.99);
}

#right.sidebar {
	xborder:1px solid yellow;
	xbackground-color:blue;
	right:0;

	x-webkit-transform: scaleX(-1);
	xtransform: scaleX(-1);
}


.sidebar > .image-container {
	xborder:1px solid blue;
	width:100%;
	height:200px;
	margin-top:50px;
	display:flex;
	justify-content: center;
	align-items: center;
	user-select:none;
	opacity:0;

	transition: opacity 2000ms;
	transition-timing-function: ease-out;
	transition-delay: 1000ms;
}

.sidebar > .image-container >img {
	xborder:1px solid red;
	height:80%;
	xopacity:0.5;
	image-rendering: pixelated;
	filter: drop-shadow(0 0 5px rgba(0,0,0, 0.99));

	xfilter: drop-shadow(0 0 10px crimson);
}

#left.sidebar > .image-container > img {
	x-webkit-transform: scaleX(-1);
	xtransform: scaleX(-1);
}

#right.sidebar > .image-container > img {
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
}



.relief {
	font-weight:bold;
	text-transform: uppercase;
	
	background: #f70000;
	color:transparent;
	text-shadow: 1px 1px 1px rgba(0,0,0, 0.8);
	

	transform: translate(-1px, -1px);
	-webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;

}


.text-border {
	font-weight:bold;
	text-transform: uppercase;

	background-color:#000000;
	color:transparent;
	text-shadow: 1px 1px 1px rgba(46, 46, 46, 0.99),  1px 1px 1px rgba(228, 228, 228, 0.9);
	-webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
}


.engraved {
	font-weight:bold;
	text-transform: uppercase;


	xbackground: #f70000;
	background-color:#000000;
	color:transparent;
	xtext-shadow: -1px -1px 1px rgba(0,0,0, 0.8);
	xtext-shadow: 1px 1px 1px hsla(0,0%,255%,0.8);

	text-shadow: 1px 1px 1px rgba(46, 46, 46, 0.99),  1px 1px 1px rgba(228, 228, 228, 0.99);

	-webkit-background-clip: text;
	-moz-background-clip: text;
	background-clip: text;
}



.sidetext {
	xborder:1px solid grey;
	font-size:2.5em;
	padding:30px;
	text-align: center;
}


#big-fade {
	position:absolute;
	z-index:3;
	background-color:black;
	width:100vw;
	height:100vh;
	transition: opacity 0.7s;
	transition-timing-function: ease-out;
}

#big-fade > .fire {
	position:absolute;
	bottom:0;
	right:0;
	margin: 0px 30px 30px 0px;
	width: 100px;
}