body { padding: 0; margin: 0; font-family: 'industry'; overflow: hidden; }
#unity-container { position: absolute }
#unity-container.unity-desktop { left: 50%; top: 50%; transform: translate(-50%, -50%) }
#unity-container.unity-mobile { width: 100%; height: 100% }
#unity-canvas { background: #FFFFFF }
.unity-mobile #unity-canvas { width: 100%; height: 100% }
#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-logo { width: 360px; height: 90px; background: url('betonbau-logo-full.png?v=2') no-repeat center; background-size: contain; }
#unity-loading-bar p { text-align: center; font-size: 18px; text-transform: uppercase; color: #969696; font-family: industry, sans-serif; font-weight: 700; font-style: normal; }
#unity-loading-bar #loading-icon { display: block; margin: 8vh auto 0; width: 40px; animation: spin 1s linear infinite; }
#unity-progress-bar-empty { width: 360px; height: 14px; margin-top: 150px; border-radius: 20px; background-color: #f7f7f7; box-shadow: inset 0px 3px 6px #d5d5d5; }
#unity-progress-bar-full { width: 0%; height: 12px; margin-top: 10px; border-radius:20px; background-color: #b41918; }
#unity-footer { position: relative }
.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 { 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 }

.login-box { max-width: 600px; width: 90vw; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; justify-content: center; align-items:center; font-family: industry, sans-serif; font-weight: 700; font-style: normal; }
.login-box img { width: 280px; margin: 20px 0; }
.login-box form { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 30px; }
.login-box h1 { color: #535352; font-size: 18px; }
.login-box label { color: #535352; font-size: 18px; }
.login-box p { margin: none; font-size: 14px; max-width: 18rem; }
.login-box p.error { color: #B41918; }
.login-box p.success { color: #567D8F; }
.login-box input[type=email], .login-box input[type=password] { width: 18rem; border: none; border-bottom: 1px solid #D5D5D5; padding: 3px 0; margin-top: 20px; font-family: 'industry'; font-weight: 500; font-size: 15px; }
.login-box input[type=email]:focus-visible, .login-box input[type=password]:focus-visible { border: none; border-bottom: 2px solid #B41918; outline: none; }
.login-box input[type=submit] { background-color: #567D8F; border: none; border-radius: 25px; margin-top: 20px; padding: 12px 40px; color: white; font-family: industry, sans-serif; font-weight: 700; font-style: normal; font-size: 14px; text-transform: uppercase; box-shadow: 0px 2px 7px #a5a5a5; transition: all 0.3s; }
.login-box input[type=submit]:hover { transform: scale(1.03); }
.login-box a { margin-top: 10px; color: #919191; font-weight: 300; font-size: 14px; }
.login-box a:first-of-type { margin-top: 20px; }

@keyframes spin {
    100% {transform: rotate(360deg);}
}

#project-name {
    margin: 30px 1rem 5px;
    font-size: 1.5rem;
    max-width: 230px;
    color: #535352;
    text-transform: uppercase;
}

#project-description {
    margin: 0 1rem;
    max-width: 230px;
    color: #535352;
}