:root {
  --bg-color: #080808;
  --second-bg-color: #101010;
  --text-color: #bcb193;
  --main-color: #9f7907;
}
body{
    padding: 0; 
    margin: 0; 
    background-color: var(--bg-color);
}
#unity-container { position: absolute; background-color: var(--main-color) }
#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: #231F20 }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; margin-left: 6.5px; 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-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-warning { position: absolute; left: 50%; top: 5%; transform: translate(-50%); background: white; padding: 10px; display: none }
#unity-back-to-web-btn{
    float: left;
    margin-left: 0.5%;
    margin-top: -0.2%;
    padding: 0.1rem 0.1rem;
    background-color: var(--main-color);
    box-shadow: 0 0 25px transparent;
    line-height: 1px; 
    font-size: 2rem;
    color: var(--bg-color);
    border: 2px solid var(--bg-color);
    border-radius: 0.5rem;
    transition: 0.3s ease-in-out;
}
#unity-back-to-web-btn:hover{
    box-shadow: 0 0 25px var(--main-color);
    background-color: var(--bg-color);
    color: var(--main-color);
}
#unity-build-title {   
    display: inline-block;
    margin-left: 40%;
    line-height: 38px; 
    font-family: poppins; 
    font-size: 18px 
}
#unity-fullscreen-button{
    float: right;
    margin-right: 0.5%;
    margin-top: -0.2%;
    padding: 0.1rem 0.1rem;
    background-color: var(--main-color);
    box-shadow: 0 0 25px transparent;
    line-height: 1px; 
    font-size: 2rem;
    color: var(--bg-color);
    border: 2px solid var(--bg-color);
    border-radius: 0.5rem;
    transition: 0.3s ease-in-out;
}
#unity-fullscreen-button:hover{
    box-shadow: 0 0 25px var(--main-color);
    background-color: var(--bg-color);
    color: var(--main-color);
}

.animate-in {
  -webkit-animation: fadeIn 1s ease-in;  
  animation: fadeIn 1s ease-in;
}

.animate-out {
  -webkit-animation: fadeOut 1s ease-out;    
  animation: fadeOut 1s ease-out;
}

@-webkit-keyframes fadeIn{
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@-webkit-keyframes fadeOut{
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}