body {
    margin: 0px;
}

nav {
    height: 17vh;
    width: 100vw;
    margin-top: -16px;

    display: flex;
    align-items: center;

    background-color: #7cb17d;
    border-bottom: 1.75px solid rgb(31, 27, 27);
    box-shadow: 0 5px 8.5px gray;
}


#menu-logo {
    height: 7.5em;
    width: 7.5em;
}

#menu {
    width: 89vw;
    margin-right: 1vw;

    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#account-pill {
    right: 1.5em;
    position: absolute;

    width: auto;
    padding: 0.5em;
    border-radius: 15px;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    border: 2px solid black;
    background-color: #7cb17d;
}

#account-pill > a {
    color: black;
    text-decoration: none;
}

#account-pill > a:hover {
    text-decoration: underline;
}

#user-logo {
    height: 5vh;
    margin-right: 1vw;
}

#mobile-menu-icon {
    display: none;
}


.menu-item > a {
    color: black;
    text-decoration: none;
}

.menu-item > a:hover {
    text-decoration: underline;
}

.menu-item {
    height: 5vh;
    padding-left: 1vh;
    padding-right: 1vh;

    margin: 1vh;
    font-size: 3vh;
    text-align: center;

    display: flex;
    align-items: center;
    justify-content: center;
}


@media screen and (max-width: 1024px) {

    nav {
        margin-top: 0;
        height: 11vh;
    }


    #menu-logo {
        height: 5em;
        width: 5em;
        margin-top: 1vh;
        margin-bottom: 1vh;
    }

    #banner-container {  
        height: 88.6vh;
    }
    
    #banner {
        height: 88.6vh;
    }
    
    #banner-text-container > div > h1 {
        font-size: 15vw;
        animation: none;
        border-right: none;
        white-space: pre-wrap;
    }

    #mobile-menu-icon { 
        height: 5vh;
        display: block;
        margin-left: auto;
        margin-right: 4vw;
    }

    #menu {
        display: none;
        flex-wrap: wrap;
        position: absolute;

        top: -8vh;
        height: 25vh;
        margin-top: 20vh;        
    }

    #round:hover {
        height: 14vh;
        width: 14vh;
    }

    #account-pill {
        top: -20vw;
        right: 30px;
        width: auto;
        max-width: 50vw;

        display: flex;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    #account-pill > img {
        height: 5vw;
    }

    #account-pill > a {
        font-size: 3vw;

    }


    .menu-item {
        width: 100vw;
        transition: 1s;
        margin-bottom: 0.5vh;
        justify-content: flex-start;
    }

    .menu-item > a::before {
        content: "- ";
    }

    .more-space {
        padding-bottom: 42vh;
    }   
}