/* style for header */
    #header {
        color: #ffffff;
        padding: 20px;
        text-align: center;
    }
    /* For The Page Background Color */
    body {
        background-color: #2f3136;
        font-family: 'Noto Sans', sans-serif;
        }
    
    /* style for main container */
    #main-container {
        display: flex;
        color: #ffffff;
        font-family: 'Noto Sans', sans-serif;
    }
    
    /* style for chatbox container */
    #chatbox-container {
        border-radius: 10px;
        background-color: #23272a;
        color: #ffffff;
        border: 1px solid #3f3f3f;
        height: 500px;
        padding: 10px;
        overflow-y: scroll;
        width: 98,5%;
        font-family: 'Noto Sans', sans-serif;
    }
    
    /* style for input form */
    #input-form {
        border-radius: 10px;
        background-color: #23272a;
        color: #ffffff;
        display: flex;
        padding: 20px;
        font-family: 'Noto Sans', sans-serif;
    }
    
    #userInput {
        background-color: #23272a;
        color: #99aab5;
        border: none;
        flex-grow: 1;
        font-size: 18px;
        padding: 10px;
        outline: none;
        border-radius: 10px;
        width: 500px;
        font-family: 'Noto Sans', sans-serif;
    }    
    
    #submitBtn {
        background-color: #357ae8;
        color: #ffffff;
        border: 1px solid #000000;
        transition: background-color 0.2s, border-color 0.2s;
        font-size: 18px;
        padding: 10px 20px;
        outline: none;
        border-radius: 10px;
        font-family: 'Noto Sans', sans-serif;
        }
        
    #submitBtn:hover {
        cursor: pointer;
        background-color: #0062ff;
        }
        
/* style for chat messages */
    .user {
        color: #ffffff;
        margin-bottom: 10px;
        font-size: 18px;
    }
    
    .chatbot {
        color: #ffffff;
        margin-bottom: 10px;
        font-size: 18px;
    }