body {
    font-family: 'Roboto', sans-serif;
    background-color: #1f1f1f;
    margin: 0;
    padding: 0;
    color: #ffffff;
}

.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-bottom: 20px;
}

.main {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    padding-bottom: 80px; /* Add enough padding to prevent chat window content from being covered by the input area */
}

.main {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Change this to flex-start */
    padding: 20px;
    padding-bottom: 80px;
}

#chat-window {
    height: calc(100vh - 120px); /* Change this to take up most of the browser window */
    width: 100%;
    max-width: 800px;
    overflow-y: scroll;
    background-color: #333333; /* Change this to a slightly lighter gray than the main background */
    border: 1px solid #444;
    border-radius: 5px;
    padding: 10px;
}

#chat-window::-webkit-scrollbar {
    width: 10px;
}

#chat-window::-webkit-scrollbar-track {
    background-color: #2c2c2c;
    border-radius: 5px;
}

#chat-window::-webkit-scrollbar-thumb {
    background-color: #444;
    border-radius: 5px;
}

#chat-window::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

#chat-form {
    position: fixed; /* Make the input area fixed at the bottom */
    bottom: 0; /* Position the input area at the bottom */
    left: 0; /* Align the input area to the left edge */
    right: 0; /* Align the input area to the right edge */
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    background-color: #1f1f1f; /* Match the background color with the body */
}

#user_input {
    flex-grow: 1;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #444;
    margin-right: 10px;
    margin-bottom: 20px;
    background-color: #3a3a3a;
    color: #ffffff;
}

button[type="submit"] {
    background-color: #007bff;
    color: white;
    font-weight: bold;
    border: none;
    margin-bottom: 20px;
    border-radius: 5px;
    padding: 7px 15px;
    cursor: pointer;
}

button[type="submit"]:hover {
    background-color: #0056b3;
}