app.py

<style>
    html,
    body,
    .gradio-container {
        background-color: #CAAC7D !important;
    }
    .brand-header {
        text-align: center;
        color: #432818 !important;
    #    margin-bottom: 25px;
    }
    .brand-header h1 {
        color: #432818 !important;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 60px;
        margin: 0;
    }
    .brand-header p {
        color: #432818 !important;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 16px;
        margin-top: 5px;
    }
    .bot-description {
        max-width: 1000px;
        margin: 0 auto 20px auto;
        text-align: center;
        color: #432818 !important;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 16px;
        line-height: 1.5;
    }
  
    #chatbot-box {
        background-color: #FFEEC2 !important;
        border: none !important;
        border-radius: 30px !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
    }
    #chatbot-box .bubble-wrap {
    background-color: #FFEEC2 !important;
    }
    #chatbot-box .wrap {
    background-color: #FFEEC2 !important;
    }
    #user-input {
        background-color: #FFEEC2 !important;
        border: none !important;
        border-radius: 30px !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
    }
  
    #user-input .bubble-wrap {
    background-color: #FFEEC2 !important;
    }
    #user-input .wrap {
    background-color: #FFEEC2 !important;
    }
/* buttons */
    .buttons {
        display: flex;
        justify-content: center;
        gap: 12px;
        margin: 18px;
    }
    a, .button {
        background: #432818;
        color: #FFEEC2 !important;
        padding: 15px;
        border-radius: 10px;
        text-decoration: none !important;
        font-family: Georgia, "Times New Roman", serif;
    }
    a:hover, .button:hover {
        background: #5A3822;
    }
/* potentially edit of Other Spaces */
.other-spaces {
    display: flex;
    background-color: #FFEEC2;
    margin: 15px;
    padding: 20px;
    font-family: Georgia, "Times New Roman", serif;
    color: #432818;
  </style>

<div class="brand-header">
    <h1>NextChapter</h1>
    <p>Personal Media Curator</p>
</div>

<div class="bot-description">
    Have you ever wondered about what to watch or read next? With NextChapter, you can get personal assistance and find the right media for you! Ask Next Chapter about any genre, preference, or question, and the AI can provide you with media recommendations tailored to your taste.
</div>