body { padding: 0; margin: 0 }
#unity-container { position: absolute }
#unity-container.unity-desktop { left: 54%; top: 20%; width:90%; height:90%; transform: translate(-54%, -20%) }
#unity-container.unity-mobile { position: fixed; width: 100%; height: 100% }
#HackMapCanvas { 
    background: #231F20;
    border-radius: 0.5%;
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.491);
}
.unity-mobile #HackMapCanvas { width: 100%; height: 100% }
#unity-loading-bar { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); display: none }

#unity-logo { 
    width: 200px; height: 195px; 
    background: url('/assets/images/favicons/Michael_fabicon_180x180.png') no-repeat center;
    border-radius: 5%;
}

#unity-progress-bar-empty {width: 200px; height: 18px; margin-top: 10px; margin-left: 15px; background: url('progress-bar-empty-dark.png') no-repeat center }
#unity-progress-bar-full {width: 0%; height: 18px; margin-top: 10px; margin-left: 15px; background: url('progress-bar-full-dark.png') no-repeat center }
#unity-footer { position: relative }
.unity-mobile #unity-footer { display: none }
#unity-logo-title-footer { float:left; width: 102px; height: 38px; background: url('unity-logo-title-footer.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; float: right; width: 38px; height: 38px; background: url('fullscreen-button.png') no-repeat center }
#unity-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }




.circular-progress {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: conic-gradient(#4f46e5 0deg, #e5e7ebce 0deg);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .inner-circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: #9e9ae0;
    background: url('../assets/img/Michael_fabicon_170x170_Circle.png') no-repeat center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .inner-circle .progress-number {
    font-size: 30px;
    font-weight: bold;
    color: #051051c5;
  }


  @media screen and (max-width: 1440px) {
    

    #unity-loading-bar { position: absolute; left: 45%; top: 45%; transform: translate(-40%, -50%); display: none }    

    .circular-progress {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background: conic-gradient(#4f46e5 0deg, #e5e7ebce 0deg);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .inner-circle {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background-color: #9e9ae0;
        background: url('../assets/img/Michael_fabicon_170x170_Circle.png') no-repeat center;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .inner-circle .progress-number {
        font-size: 30px;
        font-weight: bold;
        color: #051051c5;
      }
    
  }