body { padding: 0; margin: 0 }
#unity-container { position: fixed; width: 100%; height: 100%; }

#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { width: 384px; height: 192px; background: url('Logo.png') no-repeat center; background-size: contain;}
#unity-progress-bar-empty { margin-left: auto; margin-right: auto; width: 141px; height: 18px; margin-top: 10px; background: url('progress-bar-empty-dark.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('progress-bar-full-dark.png') no-repeat center }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }

#unity-canvas {
  width: 100%;
  height: 100%;
  opacity: 1;
  background: linear-gradient(135deg, #1A0041, #6B0381),
              url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='noise'><feTurbulence type='fractalNoise' baseFrequency='0.25' numOctaves='5'/></filter><rect width='100%' height='100%' filter='url(%23noise)'/></svg>");
  background-repeat: repeat;
  background-size: 400% 400%;
  animation: gradientNoise 30s linear infinite;
  mix-blend-mode: screen;
}
@keyframes gradientNoise {
  0% { background-position: 0% 0%, 0% 0%; }
  50% { background-position: 100% 100%, 100% 100%; }
  100% { background-position: 0% 0%, 0% 0%; }
}