/* ===================================================
    UNITY LOGO (Optional - Currently Hidden)
=================================================== */
/*
#unity-logo {
  width: 1150px;
  height: 667px;
  background: url('bg.png') no-repeat center;
  position: absolute;
  top: -350px;
  margin-left: -660px;
  opacity: 0.5;
}
*/

/* ===================================================
    BASE PAGE SETUP - PREVENT WHITE FLASH (BACKGROUND COLOR - remove margin,padding, overflow, height if u need to)
=================================================== */
html, body, ::backdrop {
  background-color: #231F20;
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
}

/* ===================================================
    FULLSCREEN BUTTON
=================================================== */
#fullscreen-button {
  position: absolute;
  top:  15px;
  right:  15px;
  background: rgba(0,0,0,0.05);
  border:  0;
  width:  40px;
  height:  40px;
  border-radius: 50%;
  box-sizing: border-box;
  transition:  transform .3s;
  cursor:  pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#fullscreen-button:hover {
  transform: scale(1.125);
}

#fullscreen-button svg:nth-child(2) { 
  display: none;
}

[fullscreen] #fullscreen-button svg:nth-child(1) {
  display: none;
}

[fullscreen] #fullscreen-button svg:nth-child(2) {
  display: inline-block;
}

/* FONTS: reference compatabile fonts here, and place in same directory as this file, line 'body{padding...' needs to be referenced. below is an example:
@font-face {
  font-family: 'Aexpective';
  src: url('Aexpective.ttf') format('truetype'),
       url('Aexpective.woff') format('woff'),
       url('Aexpective.woff2') format('woff2'),
       url('Aexpective.otf') format('opentype');
}
*/

/* ===================================================
    CUSTOM FONT (emp_pix)
=================================================== */
@font-face {
  font-family: 'emp_pix';
  src: url('emp_pix.ttf') format('truetype'),
       url('emp_pix.woff') format('woff'),
       url('emp_pix.woff2') format('woff2');
/* Show fallback font immediately while emp_pix downloads, then swap it in smoothly  */
  font-display: swap; /* Prevent Flash of Unstyled Text */
}

/* ===================================================
    CSS VARIABLES - THESE ARE PARAMETERS THAT REFLECT BACK INTO UNITY PRESENTATION SETTINGS
=================================================== */
:root {
  --main-sty-color: #FFFFFF;
  --canvas-overlay-color: #231F20;
}

/* ===================================================
    UNITY CONTAINER AND CANVAS
=================================================== */
#unity-container {
  position: absolute;
}

#unity-container.unity-desktop {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#unity-container.unity-mobile {
  width: 100%;
  height: 100%;
}

#unity-canvas {
  background: #231F20;
}

.unity-mobile #unity-canvas {
  width: 100%;
  height: 100%;
}

/* ===================================================
    OVERLAY SPLASH
=================================================== */
.overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.overlay-layer{
  background-color: var(--canvas-overlay-color);
  width: 100%;
  height: 100%;
}

/* ===================================================
    LOADING BAR
=================================================== */
#unity-loading-bar {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

/*  UNITY SPLASHSCREEN COVER - added a larger image to cover responsive area, margin-left forces it to shift to left so doesnt extend out resulting in container being scaled down to the top left,
'bg.png' needs to match same color set in Unitys splash background color (#231F20), opacity parameter added for testing */
#unity-logo { width: 1150px; height: 667px; background: url('bg.png') no-repeat center; position: absolute; top: -350px; margin-left: -660px; opacity: 0.5; }

/* ===================================================
    FOOTER SECTION
=================================================== */
#unity-footer {
  position: absolute;
}

.unity-mobile #unity-footer {
  display: none;
}

#unity-webgl-logo {
  float:left;
  width: 204px;
  height: 38px;
  background: url('webgl-logo.png') no-repeat center;
}

#unity-build-title {
  float: right;
  margin-right: 10px;
  line-height: 38px;
  font-family: arial;
  font-size: 18px;
  color: #ffffff;
}

#unity-fullscreen-button {
  float: right;
  width: 38px;
  height: 38px;
  background: url('fullscreen-button.png') no-repeat center;
}

/* ===================================================
    PAGE BACKGROUND IMAGE AND BASE STYLING
=================================================== */
/* FONT REFERENCE: reference needs to be made here  */
/************************************************* maybe worth exploring 'background-image' *************************************************/
body {
  padding:0;
  margin:0;
  background-image:url(bg.jpg);
  background-size:cover;
  background-repeat:no-repeat;
  background-position:50% 50%;
  background-attachment:fixed;
  font-family:'emp_pix',sans-serif;
  text-align:center;
  height:100%;
  overflow:hidden
}

/* ===================================================
    LOADING PROGRESS BAR + COUNTER
=================================================== */
/* PROGRESS BAR & PERCENTAGE TEXT POSITIONS BUT NOT ONLY TEXT ON Y-AXIS
top:
right:
margin-top: will move BAR&TEXT on y-axis
width: will move text on the x-axis
margin-right:will move BAR&TEXT on x-axis
z-index:
*/
.counter {
  text-align: right;
  position: absolute;
  top: 50%;
  right: 50%;
  margin-top: -300px;
  width: 200px;
  margin-right: -100px;
  z-index: 8;
  opacity: 1;
}

/*  DOWNLOADING/LOADING TEXT - change opacity to 0 if you want to disable the loading text, this is also responsible for font size (default size:30)  */
.counter p { 
  font-size: 30px;
  font-weight: 200;
  color: var(--main-sty-color);
  opacity: inherit;
  display: inherit;
  opacity: 0;
}

/*  PERCENTAGE NUMBER FONT SIZE, PLACEMENT OF (BAR+PERCENTAGE=TOGETHER) TEXT ON Y-AXIS: FULL PROGRESS BAR & PERCENTAGE NUMBER - THIS IS RESPONSIBLE FOR THE COLOR, FONT SIZE, POSITION */
.counter h1 {
  color: rgb(255, 255, 255);
  font-size: 32px;
  margin-top: -100px;
  opacity: inherit;
  display: inherit;
}

/* PROGRESS BAR (EMPTY) - if you change height be sure to change height for PROGRESS BAR (FULL) below, THIS IS RESPONSIBLE FOR THE COLOR AND THICKNESS */
.counter .ProgressLineB {
  background: #000000;
  border: none;
  height: 5px;
  width: 200px;
  position: absolute;
  top: -300px;
  opacity: inherit;
  display: inherit;
}

/* PROGRESS BAR (FULL) - if you change height be sure to change height for PROGRESS BAR (EMPTY) above, THIS IS RESPONSIBLE FOR THE COLOR AND THICKNESS 
margin-top: position of full loading bar on y-axis*/
.counter .ProgressLine {
  background: var(--main-sty-color);
  border: none;
  height: 5px;
  width: 0px;
  margin-top: -5px;
  position: absolute;
  top: -30px;
  opacity: inherit;
  display: inherit;
}

/* Additional loading elements */
.counter h1.abs {
  position: absolute;
  top: 0px;
  width: 100%;
  opacity: inherit;
  display: inherit;
}

.counter .color {
  width: 0px;
  overflow: hidden;
  color: var(--main-sty-color);
  opacity: inherit;
  display: inherit;
}

/* ===================================================
    LOADING BOX (Vertical Centered Layout)
=================================================== */
div#loadingBox {
  width: 100%;
  height: 20px;
  position: absolute;
  top: 80%;
  margin-top: 50px;
  text-align: center;
}

body .vertical-centered-box {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  top: -50px;
}

body .vertical-centered-box:after {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}

body .vertical-centered-box .content {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
  text-align:left;
  font-size: 0;
}

/* ===================================================
    FADEOUT TRANSITIONS
=================================================== */
/*  FADEOUT: 'transition: all 0.15s;' made it all smooth at the end */
* {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.15s;
  opacity: inherit;
}

/* ===================================================
    LOADER ANIMATION CIRCLE
=================================================== */
.loader-circle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(250, 250, 2500, 0.1);
  margin-left: -60px;
  margin-top: -60px;
  top: 105px;
}

.loader-line-mask {
  position:absolute;
  left:50%;
  top:50%;
  width:60px;
  height:120px;
  top:95px;
  margin-left:-60px;
  margin-top:-60px;
  overflow:hidden;
  -webkit-transform-origin:60px 60px;
  -moz-transform-origin:60px 60px;
  -o-transform-origin:60px 60px;
  -ms-transform-origin:60px 60px;
  transform-origin:60px 60px;
  -webkit-mask-image:-webkit-linear-gradient(top,#000,rgba(0,0,0,0));
  -webkit-animation:rotate 1.2s infinite linear;
  -moz-animation:rotate 1.2s infinite linear;
  -o-animation:rotate 1.2s infinite linear;
  animation:rotate 1.2s infinite linear
}

.loader-line-mask .loader-line {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(250, 250, 250, 0.5);
}

/* ===================================================
    KEYFRAMES ANIMATIONS
=================================================== */
lesshat-selector{-lh-property:0}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(360deg)}}@-moz-keyframes rotate{0%{-moz-transform:rotate(0)}100%{-moz-transform:rotate(360deg)}}@-o-keyframes
rotate{0%{-o-transform:rotate(0)}100%{-o-transform:rotate(360deg)}}@keyframes rotate{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);transform:rotate(360deg)}}lesshat-selector{-lh-property:0}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0)}100%{-webkit-transform:rotate(360deg)}}@-moz-keyframes rotate{0%{-moz-transform:rotate(0)}100%{-moz-transform:
rotate(360deg)}}@-o-keyframes rotate{0%{-o-transform:rotate(0)}100%{-o-transform:rotate(360deg)}}@keyframes rotate{0%{-webkit-transform:rotate(0);-moz-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg)
;-ms-transform:rotate(360deg);transform:rotate(360deg)}}lesshat-selector{-lh-property:0}@-webkit-keyframes fade{0%{opacity:1}50%{opacity:.25}}@-moz-keyframes fade{0%{opacity:1}50%{opacity:.25}}@-o-keyframes fade{0%{opacity:1}50%{opacity:.25}}@keyframes fade{0%{opacity:1}50%{opacity:.25}}lesshat-selector{-lh-property:0}
@-webkit-keyframes fade{0%{opacity:1}50%{opacity:.25}}@-moz-keyframes fade{0%{opacity:1}50%{opacity:.25}}@-o-keyframes fade{0%{opacity:1}50%{opacity:.25}}@keyframes fade{0%{opacity:1}50%{opacity:.25}}lesshat-selector{-lh-property:0}@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@-moz-keyframes fade-in{0%{opacity
:0}100%{opacity:1}}@-o-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}lesshat-selector{-lh-property:0}@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@-moz-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@-o-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}