/* Global Styles */
body {
    background-color: #000; /* Change to your desired color */
    color: white;
    font-family: Arial, sans-serif; /* Choose your preferred font */
    margin: 0;
    padding: 0;
}

h1 {
    text-align: center;
}

/* Header Styles */
header {
    text-align: center;
    padding: 0px;
}

header img {
    height: 200px; /* Increase height to 200px */
}

/* Footer Styles */
footer {
    text-align: center;
    width: 100%;
    padding: 10px 0;
    position: relative; /* Change from fixed to relative */
    margin-top: 20px; /* Optional: Add space above the footer if needed */
}

/* Room List Styles */
#room-selection {
    list-style: none; /* Remove bullet points */
    padding: 0;
}

.container {
    background-color: rgba(255, 20, 147, 0.1); /* Light pink background */
    border: 2px solid #ff00b1; /* Pink border */
    box-shadow: 0 0 10px rgba(255, 20, 147, 0.5); /* Pink glow */
    padding: 20px; /* Add padding inside the container */
    margin: 20px auto; /* Center the container with auto margins */
    max-width: 600px; /* Set a max-width for the container */
    border-radius: 10px; /* Rounded corners for the container */
}

.checklist {
    list-style-type: none; /* Remove bullet points */
    padding: 0; /* Remove default padding */
}

.checklist li {
    margin: 10px 0; /* Space between checklist items */
    display: flex; /* Use flexbox for alignment */
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
    text-align: center; /* Center text */
}

.checklist-image {
    margin-top: 5px; /* Space between text and image */
    width: 300px; /* Set a width for images */
    height: auto; /* Maintain aspect ratio */
}

.back-button {
    display: block; /* Make button a block element */
    margin: 20px auto 10px; /* Center the button, space above, and add space below */
    background-color: #ff00b1; /* Pink background for the button */
    color: white; /* White text color */
    padding: 10px; /* Padding for the button */
    text-decoration: none; /* Remove underline */
    border-radius: 5px; /* Rounded corners */
    width: 300px; /* Set width */
    text-align: center; /* Center text within the button */
}

.button-container {
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
    align-items: center; /* Center the buttons */
    margin: 20px 0; /* Add some space around the button container */
}

.button {
    display: block; /* Make the button a block element */
    text-align: center; /* Center the text */
    background-color: #ff00b1; /* Button background color */
    color: white; /* Button text color */
    padding: 10px 20px; /* Padding for the button */
    text-decoration: none; /* Remove underline */
    border-radius: 5px; /* Rounded corners */
    width: 300px; /* Set a fixed width for the buttons */
    margin: 10px 0; /* Space between buttons */
}