:root {
  --unity-loader-background: radial-gradient(
    53.16% 53.16% at 50% 50%,
    #fff 43.75%,
    #eef 93.75%
  );
  --unity-loader-width: 292px;
  --unity-loader-gutter: 16px;
  --unity-loader-logo-width: 224px;
  --unity-loader-logo-height: 37px;
  --unity-loader-bar-gap: 24px;
  --unity-loader-bar-height: 20px;
  --unity-loader-bar-radius: 10px;
  --unity-loader-bar-track: #dddfe1;
  /* start and end gradient colors */
  --unity-loader-bar-start: #2e008b;
  --unity-loader-bar-end: #307fe2;
}

body {
  padding: 0;
  margin: 0;
  background: var(--unity-loader-background);
}

#unity-container {
  position: fixed;
  width: 100%;
  height: 100%;
  background: var(--unity-loader-background);
}

#unity-canvas {
  width: 100%;
  height: 100%;
  visibility: hidden;
  background: var(--unity-loader-background);
}

#unity-loading-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  display: none;
  width: min(
    var(--unity-loader-width),
    calc(100vw - (var(--unity-loader-gutter) * 2))
  );
  transform: translate(-50%, -50%);
}

.il-footer__logo {
  display: block;
  width: min(var(--unity-loader-logo-width), 100%);
  height: auto;
  max-height: var(--unity-loader-logo-height);
  margin: 0 auto;
  object-fit: contain;
}

#unity-progress-bar-empty {
  width: 100%;
  height: var(--unity-loader-bar-height);
  margin-top: var(--unity-loader-bar-gap);
  overflow: hidden;
  border-radius: var(--unity-loader-bar-radius);
  background: var(--unity-loader-bar-track);
  box-shadow: inset 0 2.5px 1.25px rgba(0, 0, 0, 0.25);
}

#unity-progress-bar-full {
  width: 0%;
  height: 100%;
  margin: 0;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    var(--unity-loader-bar-start) 0%,
    var(--unity-loader-bar-end) 100%
  );
}

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