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: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#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 }

/* Styles for #rotate-device, always applied but the element is hidden */
#rotate-device {
   display: none;
   justify-content: center;
   align-items: center;
   position: absolute;
   top: 0%;
   left: 0;
   width: 100%;
   height: 100%;
   font-size: 1.5em; /* Increase font size */
   text-align: center;
   color: black; /* Optional: change text color for better visibility */
   font-weight: bold;
}

/* Media query for landscape orientation */
@media (orientation: landscape) {
    /* Ensure that #rotate-device is not displayed */
    #rotate-device {
        display: flex;
    }

    /* Correct positioning for #unity-container */
    #unity-container {
        display: none; /* Full container width for horizontal centering */
    }
}

/* Media query for portrait orientation */
@media (orientation: portrait) {
    /* Display the rotate-device message */
    #rotate-device {
        display: none; /* Shows the rotate device message */
    }

    /* Hide the Unity container */
    #unity-container {
        display: flex;
    }
}