body { padding: 0; margin: 0; min-height: 100vh; background-color: rgb(41, 99, 194); }
#unity-container { position: fixed; width: 100%; height: 100%; }
#unity-canvas { width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-style: none; border-color: #7672FC; max-width: calc(100vh * 1.965) }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }

.circular-progress {
    position: absolute; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    display: none;
    --size: 250px;
    --half-size: calc(var(--size) / 2);
    --stroke-width: 20px;
    --radius: calc((var(--size) - var(--stroke-width)) / 2);
    --circumference: calc(var(--radius) * pi * 2);
    --dash: calc((var(--progress) * var(--circumference)) / 100);
  }
  
.circular-progress circle {
    cx: var(--half-size);
    cy: var(--half-size);
    r: var(--radius);
    stroke-width: var(--stroke-width);
    fill: none;
    stroke-linecap: round;
}
  
.circular-progress circle.bg {
    stroke: #ddd;
}
  
.circular-progress circle.fg {
    transform: rotate(-90deg);
    transform-origin: var(--half-size) var(--half-size);
    stroke-dasharray: var(--dash) calc(var(--circumference) - var(--dash));
    stroke: #5394fd;
}
  
@property --progress {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}