:root {
    --orange: #E18A21;
    --blue: #0064A6;
    --darkblue: #034275;
    --white: #ffffff;
    --gray: #c9d0cd;
    --darkgray: #a8aba8;
}

body {
    background-color: var(--orange);
}

main {
    margin-top: 60px;
    margin-bottom: 60px;
}

nav {
    position: fixed;
    bottom: 0px;
    width: 100%;
    padding-bottom: 20px;
    background-color: var(--white);
    box-shadow: 0px 0px 4px 1px rgb(63 63 63 / 22%);
}

#page-title {
    position: fixed;
    top: 0px;
    height: auto;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 15px;
    z-index: 10000;
    background-color: inherit;
}



#page-title button {
    float: right;
    margin-right: 5px;
}

#page-title .title-display {

}

#page-title .title-nav {
    padding-left: 5px;
    padding-right: 5px;
}

#login.card {
    margin: 0 auto;
    width: 90%;
    margin-top: 25vh;
}

.invited {
    background-color: #f8cb9b;
}

main .card {
    margin: 0 auto;
    margin-bottom: 5px;
    width: 98%;
}

#main_display {
    padding-bottom: 5px;
}


@media screen and (min-device-width: 500px) {
    main {
        width: 50%;
        margin: 0 auto;
    }

    nav {
        top: 0xp;
    }
}