header {
        background-color: #7BB2DD;
        position: fixed;
        left: 0;
        top: 0;
        padding: 10px;
        width: 100%;
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
        font-size: 24px;
}

header a {
        text-decoration: none;
        color: white;
}

footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: #f7f7f7;
        color: #777777;
        text-align: center;
        font-size: 18px;
}

footer a {
        text-decoration: none;
        font-family: "Lato", sans-serif;
        font-weight: 400;
        font-style: normal;
}

.flex-container {
        display: flex;
        flex-direction: column;
        height: 100%;
}

.text-content {
        margin-top: 120px;
        margin-bottom: 80px;
        flex-grow: 1;
        padding: 20px;
        min-height: 300px;
}

.text-content p {
        font-family: "Lato", sans-serif;
        font-weight: 400;
        font-style: normal;
}

.text-content h2, h3 {
        font-family: "Lato", sans-serif;
        font-weight: 700;
        font-style: normal;
}

#chat-container {
        background-color: lightgray;
        height: 60%;
        width: 80%;
        border: 5px black;
        border-radius: 10px;
        flex-direction: column;
        display: flex;
        overflow:hidden;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
}

#chat-window {
        flex: 1;
        padding: 20px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
}

.message {
        padding: 10px;
        border-radius: 10px;
        margin: 10px 0;
        max-width: 75%;
        background-color: #f1f1f1;
        font-family: "Lato", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 18px;
}

.bot-message {
        align-self: flex-start;
        background-color: #7BB2DD;
        max-width: 75%;
}

.bot-message a {
        color: darkblue;
        text-decoration: none;
}

.bot-message a:hover {
        text-decoration: underline;
}

.user-message {
        align-self: flex-end;
        background-color: #e0e0e0;
}

#dropdown-container {
        padding: 10px;
        display: flex;
        justify-content: center;
}

#dropbtn {
        background-color: #3498DB;
        padding: 16px;
        font-size: 18px;
        border: none;
        cursor: pointer;
        font-family: "Lato", sans-serif;
        font-weight: 400;
        font-style: normal;
}