.webgl-content * {border: 0; margin: 0; padding: 0}
.webgl-content {position: absolute; }

.webgl-content .logo, .progress {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.webgl-content .logo {background: url('logo.png') no-repeat center / contain; width: 464px; height: 304px;}
.webgl-content .discord {
	width: 100%; height: 50px;
	position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
	text-align: center;
	margin-top: 300px;
	font-family: 'lilita';
	font-size: 24px;
	color: white;
	text-shadow: 0 4px 0 rgba(0, 0, 0, 0.3);
	user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}
.discord > a {
	/* color: #ffcc31; */
	text-shadow: none;
	background: linear-gradient(to right, #ffcc31, #00ff00 , #00ff00, #ffcc31, #ffcc31);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rainbow_animation 1s ease-in-out infinite;
    background-size: 400% 100%;
}
@font-face {
    font-family: 'lilita'; /*a name to be used later*/
    src: url('LilitaOne-Regular.ttf'); /*URL to font*/
}
@keyframes rainbow_animation {
    0%,100% {
        background-position: 0 0;
    }

    50% {
        background-position: 100% 0;
    }
}
.webgl-content .progress {height: 42px; width: 300px; margin-top: 225px;}
.webgl-content .progress .empty {background: url('progressEmpty.png') no-repeat right / cover; float: right; width: 100%; height: 100%; display: inline-block;}
.webgl-content .progress .full {background: url('progressFull.png') no-repeat left / cover; float: left; width: 0%; height: 100%; display: inline-block;}

/* .webgl-content .logo.Dark {background-image: url('progressLogo.Dark.png');}
.webgl-content .progress.Dark .empty {background-image: url('progressEmpty.Dark.png');}
.webgl-content .progress.Dark .full {background-image: url('progressFull.Dark.png');} */

.webgl-content .footer {margin-top: 5px; height: 38px; line-height: 38px; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 18px;}
.webgl-content .footer .webgl-logo, .title, .fullscreen {height: 100%; display: inline-block; background: transparent center no-repeat;}
.webgl-content .footer .webgl-logo {background-image: url('webgl-logo.png'); width: 204px; float: left;}
.webgl-content .footer .title {margin-right: 10px; float: right;}
.webgl-content .footer .fullscreen {background-image: url('fullscreen.png'); width: 38px; float: right;}

html,body{
	background: rgb(23, 189, 255);
	width: 100%;
	height: 100%;
	overflow:visible;
	padding:0;
	margin:0;
}
div#unityContainer{
	background: transparent!important;
	position: absolute;
}
div#unityContainer canvas{
	position: absolute;
	image-rendering: optimizeSpeed;
	image-rendering: -webkit-crisp-edges;
	image-rendering: -moz-crisp-edges;
	image-rendering: -o-crisp-edges;
	image-rendering: crisp-edges;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: optimize-contrast;
	image-rendering: pixelated;
	-ms-interpolation-mode: nearest-neighbor;
}

#animatedBackground {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: url("bg.png")no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
  }
  
  @keyframes animatedBackground {
	from {
	  background-position: 0 0;
	}
  /*use negative width if you want it to flow right to left else and positive for left to right*/
	to {
	  background-position: -10000px -10000px;
	}
  }