@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
body { padding: 0; margin: 0; background-color: #212121;}
#unity-container { position: absolute; }
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-container.unity-mobile { position: fixed; width: 100%; height: 100% }
#unity-canvas { background: #000000; position: relative; border-radius: 10px;}
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { position: absolute; left: 50%; top: 20%; transform: translate(-50%, -50%); display: none; width: 80%;}
#unity-text { width: 30vw; height: 10vw; color: #FFF;
  font-family: "Montserrat", sans-serif;
  font-size: 20vw;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  }
#text-container{
  width: 70%;
  display: flex; /* Asegúrate de que #text-container es un contenedor flex */
  justify-content: flex-end; /* Alinea los elementos hijos a la derecha */
}
#unity-progress-bar-empty {  width: 100%; height: 18px; background: url('progress-bar-empty-light.jpg') repeat-x center}
#unity-progress-bar-full { width: 20px; height: 20px;  background: url('progress-bar-full-light.png') no-repeat center; position: relative;
  left: 0;}
.unity-mobile #unity-footer { display: none }
#unity-webgl-logo { float:left; width: 204px; height: 38px; background: url('webgl-logo.png') no-repeat center }
#unity-build-title { float: right; margin-right: 10px; line-height: 38px; font-family: arial; font-size: 18px }
#unity-fullscreen-button { cursor:pointer; position: absolute;
  top: 0; left: 0; width: 45px; height: 45px; background: url('fullscreen-button.png') no-repeat center; padding-left: 10px;
  padding-top: 10px; border-radius: 10px; margin-top: 10px; margin-left: 10px; border-color: white;} 
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }
#unity-text span {
  color: #59C1D9;
font-family: Montserrat;
font-size: 20vw;
font-style: normal;
font-weight: 900;
line-height: normal;
}
#loadingWheel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: spin 2s linear infinite;
}

#loadingWheel img {
  width: 50px; /* Ajusta esto al tamaño que desees */
  height: 50px; /* Ajusta esto al tamaño que desees */
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}