body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    background-image: url('/images/combined_cinema_image.jpg');
    background-size: auto 110%; /* Scales the height to be 10% larger than the container */
    background-position: center center; /* Centers the image */
    background-repeat: no-repeat; /* The image will not repeat */
    background-attachment: fixed; /* The image will not scroll with the page */
}

.login-container {
    position: absolute;
    left: 50%; /* Center horizontally */
    bottom: 20%; /* Move up from the bottom; adjust this value as needed */
    transform: translateX(-50%); /* Center horizontally */
    text-align: center;
    z-index: 2;
    max-width: 400px; /* Adjust as needed */
    padding: 20px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

input[type="text"], input[type="password"] {
    width: calc(100% - 20px); /* Subtract total horizontal padding from 100% */
    padding: 10px;
    margin: 10px 0; /* Add vertical margin only */
    box-sizing: border-box; /* Include padding and border in the element's total width */
    border: 1px solid #ddd;
    border-radius: 5px;
    display: block;
    /* Remove max-width if it is causing the fields to be cut off */
}

#openCurtain, button[type="submit"] {
    background: #600; /* Deep red color for the cinema theme */
    color: #fff;
    font-size: 20px;
    padding: 12px 25px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 25px; /* Makes the button rounded */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adds a subtle shadow */
    text-transform: uppercase; /* Makes the button text uppercase */
    font-weight: bold; /* Makes the button text bold */
    margin-top: 20px; /* Adds space above the button */
}

#openCurtain:hover, button[type="submit"]:hover {
    background: #800; /* Darkens the button on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Increases the shadow on hover */
}

.hidden {
    display: none;
}

input[type="text"], input[type="password"] {
    width: 100%; /* Full width of the container */
    max-width: 400px; /* Maximum width of the input fields */
    padding: 10px;
    margin: 10px auto; /* Centers the input fields */
    display: block;
    border: 1px solid #ddd; /* Adds a subtle border */
    border-radius: 5px; /* Rounds the corners of the input fields */
}

/* Responsive design adjustments */
@media (max-width: 768px) {
    .login-container {
        width: calc(100% - 40px); /* Adjust for mobile */
        left: 20px; /* Left padding */
        right: 20px; /* Right padding */
        bottom: 20%; /* Slightly up from the bottom on mobile */
        transform: translateX(0); /* No need for horizontal translation on mobile */
    }
}

    input[type="text"], input[type="password"] {
        /* Ensure that the width calculations take padding into account */
        width: calc(100% - 40px); /* Adjust the calc() value if needed */
    }
}