body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
}

#chat-container {
display: flex;
    flex-direction: column;
    background-color: #ffffff;
    border: 1px solid #ccc;
    width: 600px;
    overflow: hidden;
}

#chat-box {
    padding: 20px;
    height: 510px;
    overflow-y: auto;
    background-color: #e6d7c8; /* A light beige color similar to the Player's Handbook */
}

.message {
    margin: 10px 0;
}

.user-message {
    text-align: right;
}

.ai-message {
    text-align: left;
}

#message-form {
    display: flex;
    background-color: #f5f5f5;
    padding: 10px;
}

#message-input {
    flex-grow: 1;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 5px;
}

button {
    margin-left: 10px;
    background-color: #007bff;
    color: white;
    border: none;
    padding: 5px 15px;
    border-radius: 5px;
    cursor: pointer;
}

.ai-reference {
    text-align: left;
    font-size: 0.8rem;
    font-style: italic;
    color: #777;
}

body {
    font-family: 'Libre Baskerville', serif;
    background-color: #f5f5f5;
    font-size: 0.9rem;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Cinzel', serif;
}

/* Add this style for the title */
#title {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    text-align: center;
    margin: 20px 0;
}

/* Add this new rule for user-message */
.user-message {
    font-weight: bold; /* Make questions bold */
}
#left-image, #right-image {
    height: 100%;
    max-height: 600px; /* Limit image height to match chat box height */
    object-fit: contain; /* Scale images proportionally */
}

#left-image {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

/* Add border-radius to the right image */
#right-image {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}



#main-container {
    display: flex;
    align-items: center; /* Center images vertically */
    justify-content: center; /* Center the layout horizontally */
    margin: 0 auto; /* Center the container on the screen */
    max-width: 90%; /* Set a maximum width to avoid overflowing on small screens */
}