#xp-bar-container {
	border:6px inset grey;

	display:block;
	top:0;
	left:0;
	xwidth:100vw;
	width:1000px;
	height:30px;
	margin:auto;
	xz-index:1;
	transition:width 0.5s;

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

	box-shadow: 0px 0px 5px 0px rgba(0,0,0, 0.5);


}

#xp-bar-container:before {
    content: "";
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    border: 3px solid grey;
    border-style: outset;
}

#xp-bar-container > .bg {
	position:absolute;
	width:100%;
	height:100%;
	background-color:black;



}

#xp-bar-container > .bar {
	position:absolute;
	xwidth:30%;
	max-width:100%;
	height:100%;
	background-color: #0066ff;
}

#xp-bar-container > .level-container {
	xborder:1px solid red;
	position:absolute;
	right:0;
	margin-right:20px;
	color:rgb(200, 200, 200);
	text-shadow: 2px 2px 2px rgba(0,0,0, 0.5);
	font-size:1.1em;
    height:100%;

    display:flex;
	justify-content: center;
	align-items: center;
}

#xp-bar-container > .fade {
	position:absolute;
	width:100%;
	height:100%;
	box-shadow: inset 2px 2px 2px rgba(0,0,0, 0.5);

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

	xborder-image-source: url('../img/bar.png');
	border-image-slice: 15;
	border-image-width: 15;
	border-image-outset: 0;
	border-image-repeat: round;
}