/* Common styles for body and html, always applied */
body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Removes the scrollbar */
    background: url('background.jpg') no-repeat center center fixed;
    background-size: cover; /* Covers the background, keeping aspect ratio */
    -webkit-background-size: cover; /* For Safari and older Chrome */
    -moz-background-size: cover; /* For old Firefox */
    -o-background-size: cover; /* For old Opera */
}
/* Styles for the Unity container */
#unity-container {
    text-align: center;
    height: 100%;
    width: 100%;  
}
#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 { 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: 2.5em; /* Increase font size */
        text-align: center;
        color: white; /* 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: none;
    }

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

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

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