We have a database, I will send you the front end web design parts of it. 
Right now all this are correctly positioned in relation to other sections, please do not change any of this. 
What we need to, is, without changing the relative position of all the parts, we need to put them close together. 
The current webpage has a room display in the middle, to the right of this room there is a chat box. 
Bellow these two, there is a wide box with options for rooms, and to the right there is a small theme selector. 
We need to make sure that these relative positions stay the same, we just need to put them all together, where their borders touch with each other, and they fit neatly into a new general square for the website. 


It all has to end up neatly placed inside a big general square on the website, all well organized and with no empty space. 


<<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LLM Controlled Environment</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
    <div class="container">
        <main>
            <!-- Central Display Area -->
            <div id="central-display">
                <div id="room-background">
                    <div class="character" id="character"></div>
                    <!-- Message Bubbles Container -->
                    <div id="message-bubbles"></div>
                </div>
                <div class="room-label" id="current-room-label">Bedroom</div>
            </div>

            <!-- Chatbox Area -->
            <div id="chat-container">
                <div id="chat"></div>
                <div id="input-area">
                    <input type="text" id="input" placeholder="Enter your message here..." autofocus>
                    <button id="send">Send</button>
                </div>
            </div>
        </main>

        <footer>
            <!-- Possible Rooms Section -->
            <div id="possible-rooms-container">
                <h2>Available Rooms</h2>
                <ul id="possible-rooms">
                    <li data-room="kitchen">Kitchen</li>
                    <li data-room="living_room">Living Room</li>
                    <li data-room="bedroom">Bedroom</li>
                    <li data-room="study">Study</li>
                    <li data-room="library">Library</li>
                    <li data-room="garden">Garden</li>
                    <!-- Add more rooms as needed -->
                </ul>
            </div>

            <!-- Theme Selection Section -->
            <div id="theme-selector">
                <h2>Select Theme</h2>
                <select id="theme-dropdown">
                    <option value="default">Bubblegum Dream</option>
                    <option value="dark">Midnight Study</option>
                    <option value="pastel">Pastel Paradise</option>
                    <option value="aero">Aero Palace</option>
                    <option value="forest">Forest Whisper</option>
                    <option value="cosmic">Cosmic Glow</option>
                    <option value="autumn">Autumn Bliss</option>
                    <option value="cyberpunk">Cyberpunk</option>



                    <!-- Add more themes as needed -->
                </select>
            </div>
        </footer>
    </div>

    <script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>


* CSS Variables for Themes * styles.css/
:root {
    --primary-color: rgba(173, 216, 230, 0.7); /* Default: Light Blue Translucent */
    --secondary-color: rgba(135,206,250,0.5); /* Lighter Blue */
    --accent-color: #173b13; /* Deep green for text */
    --outline-color: #f596ff; /* Pink */
    --background-color: #E0F7FA; /* Light Cyan */
    --character-color: #f596ff; /* Pink */
    --button-color: #f2dc18; /* Yellow */
    --button-hover-color: #63B3ED; /* Light Dodger Blue */
}

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--background-color); /* Soft pastel background */
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    overflow: hidden; /* Prevent scrollbars */
}

.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

/* Main Content Area */
main {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px; /* Space between central-display and chat-container */
    padding: 20px;
    box-sizing: border-box;
}

/* Central Display Styles */
#central-display {
    position: relative;
    width: 400px; /* Adjust as needed */
    height: 400px;
    background: var(--primary-color);
    backdrop-filter: blur(10px);
    border-radius: 60px;
    box-shadow: 0 9px 60px rgba(0, 0, 0, 0.5);
    border: 12px solid var(--outline-color);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
    z-index: 1; /* Ensure it's above other elements */
}

#room-background {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: background-image 0.5s ease;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}

#room-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--accent-color); /* The color filter */
    opacity: 0.8; /* Adjust this value for the intensity of the filter */
    mix-blend-mode: screen; /* Choose how the filter blends with the image */
    pointer-events: none; /* Ensure it doesn’t interfere with user interactions */
}

/* Room Label */
.room-label {
    position: absolute;
    bottom: 10px;
    background: var(--secondary-color);
    padding: 5px 15px;
    border-radius: 15px;
    font-weight: bold;
    color: var(--accent-color);
    backdrop-filter: blur(5px);
    font-size: 1.2em;
}

/* Character Styles */
.character {
    width: 80px;
    height: 80px;
    background-color: var(--character-color);
    border-radius: 50%;
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    transition: transform 0.5s ease, background-color 0.5s ease;
    cursor: pointer;
}

.character:hover {
    transform: translate(-50%, 50%) scale(1.1);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
}

/* Message Bubbles */
#message-bubbles {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    pointer-events: none;
    z-index: 10;
}

.message-bubble {
    position: relative;
    background: rgba(255, 255, 255, 0.8);
    color: #333;
    padding: 10px 15px;
    border-radius: 20px;
    margin-bottom: 10px;
    font-size: 0.9em;
    animation: fadeOut 5s forwards;
    max-width: 70%;
}

.message-bubble::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 20%;
    border-width: 10px 10px 0 10px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.8) transparent transparent transparent;
}

@keyframes fadeOut {
    0% { opacity: 1; transform: translateY(0); }
    80% { opacity: 1; transform: translateY(-10px); }
    100% { opacity: 0; transform: translateY(-20px); }
}

/* Chatbox Styles */
#chat-container {
    width: 300px; /* Adjust as needed */
    border-radius: 15px;
    border: 6px solid var(--outline-color);
    display: flex;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
    flex-direction: column;
}

#chat {
    flex: 1;
    background: var(--primary-color);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 20px;
    overflow-y: auto;
    margin-bottom: 10px;
    max-height: 400px; /* Fixed height */


}

#chat div {
    margin-bottom: 15px;
}

#chat strong {
    color: #333;
}

#chat .user {
    text-align: right;
    color: var(--accent-color);
}

#chat .assistant {
    text-align: left;
    color: var(--accent-color);
}

#chat .assistant-action {
    background-color: rgba(173, 216, 230, 0.3);
    padding: 10px 15px;
    border-radius: 15px;
    display: inline-block;
}

.error { 
    color: #FF4D4D; 
    font-weight: bold;
}

/* Input Area */
#input-area {
    display: flex;
    gap: 10px;
}

#input {
    flex: 1;
    padding: 10px 15px;
    border: none;
    border-radius: 20px;
    background: var(--primary-color);
    backdrop-filter: blur(5px);
    outline: none;
    color: var(--accent-color);
    font-size: 1em;
}

#send {
    border: none;
    border-radius: 16px;
    background-color: var(--button-color);
    color: var(--accent-color);
    cursor: pointer;
    transition: background-color 0.3s ease;



}

#send:hover {
    background-color: var(--button-hover-color);
}

/* Footer Styling */
footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    box-sizing: border-box;
}

/* Possible Rooms Section */
#possible-rooms-container {
    width: 950px; /* Smaller width */
    height: 80px; /* Smaller height */
    background: var(--primary-color);
    backdrop-filter: blur(10px);
    border: 5px solid var(--outline-color);
    border-radius: 15px;
    padding: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#possible-rooms-container h2 {
    font-size: 1em; /* Smaller font size */
    text-align: center;
    color: var(--accent-color);
    margin-bottom: 5px;
}

#possible-rooms {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    padding: 0;
    margin: 0;
    overflow-x: auto; /* Enable horizontal scrolling if needed */
    width: 100%; /* Span the full width of the container */
}

#possible-rooms li {
    flex: 0 0 auto; /* Prevent items from stretching */
    padding: 6px 10px;
    margin-right: 8px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    color: var(--accent-color);
    font-size: 0.9em;
}

#possible-rooms li:last-child {
    margin-right: 0;
}

#possible-rooms li:hover {
    background-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

/* Theme Selector Section */
#theme-selector {
    width: 150px; /* Much smaller width */
    height: 60px; /* Smaller height */
    background: var(--primary-color);
    backdrop-filter: blur(10px);
    border: 4px solid var(--outline-color);
    border-radius: 15px;
    padding: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#theme-selector h2 {
    font-size: 0.9em; /* Much smaller font size */
    text-align: center;
    color: var(--accent-color);
    margin-bottom: 5px;
}

#theme-dropdown {
    width: 100%;
    padding: 4px 6px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.3);
    outline: none;
    cursor: pointer;
    color: var(--accent-color);
    font-size: 0.8em; /* Much smaller font size */
    transition: background 0.3s ease;
}

#theme-dropdown:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Scrollbar Styling */
#chat::-webkit-scrollbar {
    width: 8px;
}

#chat::-webkit-scrollbar-thumb {
    background: rgba(173, 216, 230, 0.5);
    border-radius: 4px;
}

#chat::-webkit-scrollbar-thumb:hover {
    background: rgba(173, 216, 230, 0.7);
}

/* Responsive Design */
@media (max-width: 768px) {
    #central-display {
        width: 300px;
        height: 300px;
    }

    #chat-container {
        width: 250px;
    }

    #possible-rooms-container {
        width: 200px;
        height: 60px;
        padding: 8px;
    }

    #possible-rooms-container h2 {
        font-size: 0.9em;
        margin-bottom: 5px;
    }

    #possible-rooms li {
        padding: 5px 8px;
        font-size: 0.8em;
    }

    #theme-selector {
        width: 120px;
        height: 50px;
        padding: 8px;
    }

    #theme-selector h2 {
        font-size: 0.8em;
        margin-bottom: 5px;
    }

    #theme-dropdown {
        padding: 3px 5px;
        font-size: 0.7em;
    }
}

@media (max-width: 480px) {
    main {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    #chat-container {
        width: 90%;
    }

    footer {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    #possible-rooms-container {
        width: 90%;
        height: 50px;
    }

    #theme-selector {
        width: 90%;
        height: 50px;
        margin-top: 10px;
    }

    #central-display {
        width: 250px;
        height: 250px;
    }
}