body, html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

/* Assuming .intro-container is above and already styled */

/* Style for the chat container */
.chat-container {
    display: flex; /* Enables flexbox */
    flex-direction: column; /* Stacks children vertically */
    align-items: center; /* Centers children horizontally */
    justify-content: center; /* Centers children vertically if there is free space */
    width: 100%; /* Ensures the container takes full width */
    max-width: 600px; /* Maximum width of the chat container, adjust as needed */
    margin: 20px auto; /* Adds space above and below, while centering horizontally */
}

.chat-box {
    width: 100%; /* Ensures the chat box takes the full width of its container */
    /* Add any additional styles for chat box like padding, borders, etc. */
}

.user-input, .submit-button {
    width: 90%; /* Adjust the width as needed, or keep it 100% if you prefer */
    margin: 10px 0; /* Adds space between the chat box and input, and between input and button */
    /* Add any additional styles for inputs and button */
}

/* To ensure that button appears next to the input, not below */
.user-input {
    width: calc(100% - 120px); /* Subtract the width of the button plus any desired margins */
    margin-right: 10px; /* Adds space between the input and the button */
}

.submit-button {
    width: 110px; /* Set a fixed width for the button */
}

/* Additional styles to ensure the button is aligned with the input */
.user-input-container {
    display: flex;
    justify-content: space-between;
}


.intro-container {
    text-align: center; /* Center align content */
    max-width: 100%; /* Set maximum width to prevent overflow */
    margin: 0 auto; /* Center align the container */
}

.intro-container img {
    max-width: 60%; /* Keeps the width within the bounds of the container */
    max-height: 500px; /* Sets a maximum height for the image */
    width: auto; /* Ensures the width adjusts to maintain aspect ratio */
    height: auto; /* Ensures the height adjusts to maintain aspect ratio */
    display: block; /* Allows margins to be applied */
    margin: 0 auto; /* Centers the image horizontally */
    object-fit: contain; /* Ensures the image fits within the given dimensions without stretching */
}

#loader {
    font-size: 25px;
    text-align: center;
}