body { padding: 0; margin: 0 }
#unity-container { position: fixed; width: 100%; height: 100%; }
#unity-canvas { width: 100%; height: 100%; background: #231F20 }
#unity-loading-bar { position: fixed; left: 44%; top: 37%; display: none ;}
#unity-logo { width: 154px; height: 130px; background: url('unity-logo-dark.png') no-repeat center }
#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 }
.loading-bar-rotate {transform: rotate(90deg) translateY(10%);} 
#hint-panel {display: flex; position: relative; top: 15%; margin-top: 0; margin-bottom: auto; margin-left: auto; margin-right: auto; height: 250px; width: 370px; border-style: solid; border-radius: 10px; border-width: 4px; border-color: #181818f8; background-color: rgba(44, 43, 43, 0.95); align-items: center; flex-wrap: wrap; -webkit-user-select: none; user-select: none; pointer-events: none; }
#hint-img-container{margin-left: 40%; margin-right: 40%; margin-top: 3%; margin-bottom: 3%; }
#hint-image{ max-width: 100%; max-height: 100%; pointer-events: none; }
#hint-contanier {display: none; position: fixed; top: 0%; left: 0%; bottom: 0%; right: 0%; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 3; }
#hint-text{ margin-top: -5%; margin-left: 8%; margin-right: 8%; margin-bottom: 3%; color: #eeeeee; text-align: center; }