body { padding: 0; margin: 0 }
#unity-container { position: absolute }
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-container.unity-mobile { position: fixed; width: 100%; height: 100% }
#unity-canvas { background: #ffffff }
.unity-mobile #unity-canvas { width: 100%; height: 100% }

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

#unity-logo { 
  width: 512px; 
  height: 512px; 
  background: url('unity-logo-dark.png') no-repeat center; 
  margin: 0 auto; 
  display: block;
}

/* Loading percentage display */
#unity-progress-bar-container {
  position: relative;
  margin-top: 50px;
}

#loading-percentage {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  font-family: Arial, sans-serif;
  font-size: 24px;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  display: none;
  white-space: nowrap;
}

#unity-progress-bar-empty { 
  width: 685px; 
  height: 17px; 
  margin-left: 6.5px; 
  background: url('progress-bar-empty-dark.png') no-repeat center 
}

#unity-progress-bar-full { 
  height: 17px;  
  background: url('progress-bar-full-light.png') no-repeat left center; 
  background-size: 685px 17px;
}

#unity-footer { position: relative }
.unity-mobile #unity-footer { display: none }

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

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

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

#unity-warning { 
  position: absolute; 
  left: 50%; 
  top: 5%; 
  transform: translate(-50%); 
  background: white; 
  padding: 10px; 
  display: none 
}