* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  background-color: #d9d9d9;
  background: radial-gradient(circle, #ffffff 0%, #808080 200%);
  overflow: hidden;
}

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

#unity-loading-bar {
  position: absolute;
  top: calc(50% - var(--loading-bar-height)/2);
  height: var(--loading-bar-height);
}

@media screen and (orientation:portrait) {
  #unity-loading-bar {
    left: 15%;
    width: 70%;
  }
}

@media screen and (orientation:landscape) {
  #unity-loading-bar {
    left: 30%;
    width: 40%;
  }
}

#unity-progress-bar-logo {
  position: absolute;
  left: calc(50% - var(--progress-bar-logo-size)/2);
  top: 0;
  width: var(--progress-bar-logo-size);
  height: var(--progress-bar-logo-size);
  border-radius: var(--progress-bar-border-radius);
  content: url('logo.png');
  filter: drop-shadow(0 var(--drop-shadow-size) var(--drop-shadow-size) #00000050);
}

#unity-progress-bar-background {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: calc(var(--progress-bar-height));
  background-color: rgba(255, 255, 255, 0.625);
  filter: drop-shadow(0 var(--drop-shadow-size) var(--drop-shadow-size) #00000050);
}

#unity-progress-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 90%;
  height: var(--progress-bar-height);
  background: #3cb3fd;
  background: linear-gradient(90deg, #3cb3fd 0%, #73c9ff 100%);
}

:root {
  --loading-bar-height: 40vh;
  --progress-bar-height: 4.2vh;
  --progress-bar-border-radius: calc(var(--progress-bar-height)/2);
  --progress-bar-logo-size: calc(var(--loading-bar-height) - 4*var(--progress-bar-height));
  --drop-shadow-size: 0.375vh;
}