@font-face {
  font-family: 'ComicSCF';
  src: url('../fonts/comic_scf.woff2') format('woff2'),
  url('../fonts/comic_scf.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  background: #000;
  color: white;
  font-size: 12px;
  font-family: 'Arial', sans-serif;
  background-image: url(../img/bg.jpg);
  background-repeat: no-repeat;
  background-position: center top;
}

a {
  color: white;
}

a:link {
  color: White;
}

a:hover {
  color: DimGray;
}

a:visited {
  color: White;
}

.header {
  height: 33px;
  text-align: right;
  width: 90%;
  margin: 0 auto;
  padding-top: 7px;
  padding-bottom: 5px;
}

/* webgl layout */

.webgl-wrapper {
  width: 90%;
  min-width: 768px;
  margin: 0 auto;
  padding: 5px;
  box-sizing: border-box;
  background-color: #456C9E;
}

#unityContainer {
  width: 62vw; height: calc((9/16)*62vw);
  display: block;
}

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

.webgl-content {
  position: relative;
  width: 100%;
  background: #ccc;
}

#webgl-content-loader {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0%;
  top: 0%;
  background-image: url(../img/loading_bg.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

#webgl-content-loader .loader-background {
  background-image: url(../img/WebGL_loading_meter.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width: 47.9%;
  height: 12%;
  position: absolute;
  left: 50%;
  top: 72.5%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  overflow: hidden;
}

#webgl-content-loader .loader-fill {
  position: absolute;
  left: 1%;
  top: 32%;
  background-image: url(../img/WebGL_loading_meter_progressbar.png);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: cover;
  width: 0%;
  height: 34%;
}

#unityContainer canvas {
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
}

#copyright_container {
  width: 100%;
  margin-top: 36px;
  text-align: center;
}

#share-qr {
  width: 100%;
  margin-top: 36px;
  margin-bottom: 36px;
  text-align: center;
}

.loading {
  font-size: 2.083em;
  color: #fff;
  position: absolute;
  left: 50%;
  top: 77%;
  font-family: "ComicSCF", Arial, Helvetica, sans-serif;
  text-shadow: 0 2px 1px #000, 1px 0 0 #000, -1px 0 0 #000;
  text-align: left;
  width: 125px;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

.loading-txt,
.loading-dots {
  display: inline;
}

.loading-dots {
  margin-left: -10px;
}

.loading-info {
  font-size: 2.36vh;
  color: #fff;
  position: absolute;
  left: 50%;
  top: 84%;
  font-family: "ComicSCF", Arial, Helvetica, sans-serif;
  text-shadow: 0 2px 1px #000, 1px 0 0 #000, -1px 0 0 #000;
  text-align: center;
  width: 53%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}

@media screen and (max-width: 700px) {
  .loading-info {
    width: 90%;
    font-size: 1.6vh;
    top: 88%;
  }
}

.loading-dots:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(4, end) 1.5s infinite;
  animation: ellipsis steps(4, end) 1.5s infinite;
  content: "\2026";
  /* ascii code for the ellipsis character */
  width: 0px;
}

@keyframes ellipsis {
  to {
    width: 1.25em;
  }
}

@-webkit-keyframes ellipsis {
  to {
    width: 1.25em;
  }
}


/* unity default progress */
.webgl-content .logo, .progress {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.webgl-content .logo {background: url('../images/progressLogo.Light.png') no-repeat center / contain; width: 154px; height: 130px;}
.webgl-content .progress {height: 18px; width: 141px; margin-top: 90px;}
.webgl-content .progress .empty {background: url('../images/progressEmpty.Light.png') no-repeat right / cover; float: right; width: 100%; height: 100%; display: inline-block;}
.webgl-content .progress .full {background: url('../images/progressFull.Light.png') no-repeat left / cover; float: left; width: 0%; height: 100%; display: inline-block;}
.webgl-content .logo.Dark {background-image: url('../images/progressLogo.Dark.png');}
.webgl-content .progress.Dark .empty {background-image: url('../images/progressEmpty.Dark.png');}
.webgl-content .progress.Dark .full {background-image: url('../images/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('../images/webgl-logo.png'); width: 204px; float: left;}
.webgl-content .footer .title {margin-right: 10px; float: right;}
.webgl-content .footer .fullscreen {background-image: url('../images/fullscreen.png'); width: 38px; float: right; cursor:pointer;}