* {
    margin: 0;
    padding: 0;
}

:root {
    --navbar-color: violet;
    --navbar-button: yellow;
    --navbar-button-hover: green;
    --navbar-text-hover: white;

    --main-back: rgb(75, 75, 75);
    --main-text: white;

    --border1: grey;
    --border2: white;

    --cards-background: rgba(153, 205, 50, 0.7);
    --card1-background: yellow;
    --card2-background: rgb(245, 139, 0);

    --footer-background: grey;
}

/* NavBar Styling */

header {
    position: sticky;
    top: 0;
}

.navbar {
    background-color: var(--navbar-color);
    margin: 2px;
    padding: 3px;

}

nav {
    display: flex;
    list-style: none;

}

nav li {
    margin: 2px 10px;
    padding: 5px 10px;

    background-color: var(--navbar-button);
    border-radius: 20px;

}

nav li:hover {
    background-color: var(--navbar-button-hover);
    color: var(--navbar-text-hover)
}

/* Main */
main {
    background-color: var(--main-back);
    color: var(--main-text);
    padding: 34px;
}

.cards {
    background-color: var(--cards-background);
    border: 2px solid var(--border1);
    text-align: center;

    margin: 6px;
    padding: 55px 23px;
}

.card {
    border: 2px solid var(--border2);
    /* display: flex inline; */
    margin: 0 12px;

    height: 70vh;
    width: 40%;

    display: inline-block;
}

.card1 {
    background-color: var(--card1-background);
}

.card2 {
    background-color: var(--card2-background);
}

/* content */
.TextBox {
    border: 2px solid var(--border1);
    border-radius: 20px;

    text-align: center;
    font-size: 2em;
    font-weight: bold;

    margin: 0 20vw;
    padding: 34px;
}

/* Chatbot */
.Chatbot {
    border: 2px solid var(--border1);
    border-radius: 50%;

    width: 5%;

    position: fixed;

    bottom: 12px;
    right: 20px;

    margin: 10px;
}

/* Footer */
.footer {
    background-color: var(--footer-background);
    height: 10vh;
    text-align: center;
    padding: 3vh;

}