#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(16,22,31);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2147483647;

    flex-direction: column;
}
.background-image {
    position: absolute;
    width: 256px;
    height: 256px;
    background-image: url('/resources/img/logo.png'); /* Replace with the URL of your image */
    background-size: cover; /* Ensure the image fills the div */
    background-position: center; /* Center the image */
    opacity: 0.1; /* Make the image semi-transparent */
    z-index: 1; /* Positioned behind the loader */
}
.spin_loader {
    box-sizing: border-box;
    border: 6px solid rgba(255, 255, 255, 0.2); /* Light white background of loader */
    border-top: 6px solid white; /* Solid white spinner */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    z-index: 2; /* Positioned above the background image */
    box-shadow: 0 0 2px 2px black; /* Subtle 1px shadow around the circle */
}
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
#content {
    display: block;
}
.noscript-container {
    margin-top: 20px; /* Add spacing if needed */
    z-index: 3; /* Ensure it appears above the background image */
}
noscript {
    color: rgb(99, 168, 214);
    font-size: 15px;
    text-align: center;
    display: block;
}
.background-container {
    position: relative; /* Makes the background image and spinner relative to this container */
    width: 256px;
    height: 256px;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}