body {
  padding: 0;
  margin: 0;
}
#unity-container {
  position: fixed;
  width: 100%;
  height: 100%;
}
#unity-canvas {
  width: 100%;
  height: 100%;
  background: #ffffff;
}
#loading-bar {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
}
#logo {
  width: 256px;
  height: 128px;
  background: url("qweebi_logo_color_rec.webp") no-repeat center / contain;
}
#progress-bar-empty {
  margin-left: auto;
  margin-right: auto;
  width: 256px;
  height: 16px;
  background: #e5e7eb;
  border-radius: 8px;
}
#progress-bar-full {
  width: 0%;
  height: 16px;
  border-radius: 8px;
  background: #2772f0;
}
#unity-warning {
  position: absolute;
  left: 50%;
  top: 5%;
  transform: translate(-50%);
  background: white;
  padding: 10px;
  display: none;
}

#banner-hide-unity {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.loader{
  display: block;
  position: relative;
  height: 16px;
  width: 256px;
  background: #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}
.loader::after {
  content: '';
  width: 40%;
  height: 100%;
  background: #2772f0;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  animation: anim-loader 2s linear infinite;
  border-radius: 8px;
}

@keyframes anim-loader {
  0% {
    left: 0;
    transform: translateX(-100%);
  }
  100% {
    left: 100%;
    transform: translateX(0%);
  }
}