.nav_icon {
    display: none;
    color: white;
    cursor: pointer;
    font-size: 1.5rem;
    position: absolute;
    padding: 16px;
    right: 0;
    margin-left: auto;
    align-self: center;
}
#navbar {
    position: absolute;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    background-color: transparent;
    transition: background-color .3s;
    z-index: 999;
}
#brand_container {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-right: 16px;
    padding-left: 16px;
}
#brand_container > .me_img {
    height: 64px;
    width: 64px;
    left: 0;
    margin: 16px;
}
#navbar > #nav_text {
    font-size: 1.5rem; 
}
#nav_text {
    font-size: 1.5rem; 
}
.navbar > .nav_elements {
    font-size: 1.5rem;
    display: flex;
    position: absolute;
    right: 0;
}
#navbar > #nav_elements > .nav_element {
    padding: 16px;
    transition: background-color 0.5s;
}
#navbar > #nav_elements > .nav_element:last-of-type { margin-right: 16px; }
#navbar > #nav_elements > .nav_selected {
    background-color: rgba(128, 128, 128, 0.248);
}
#navbar > #nav_elements > .nav_element:hover {
    background-color: rgba(128, 128, 128, 0.248);
    /* background-color: rgba(32, 32, 32, 0.84); */
}
#navbar > #nav_elements > .nav_element > p {
    color: white;
    margin: 0px;
}
#nav_space {
    display: none;
    height: 0;
}
@media only screen and (max-width: 980px) {
    body {
        display: block;
    }
    #nav_space {
        display: block;
        position: relative; 
        height: var(--mobile_menu_y_offset); 
        z-index: -1;
    }
    #navbar {
        flex-direction: column;
        align-items: start;
    }
    #navbar.mobile {
        /* background-color: rgba(16,0,36,1); */
        background-color: #111;
        flex-direction: column;
    }
    #navbar.mobile .nav_elements .nav_element {
        /* display: none; */
        opacity: 0;
        /* transition: opacity 5s; */
    } 
    #navbar .nav_elements .nav_element {
        /* display: none; */
        opacity: 0;
        /* transition: opacity var(--menu-transition); */
    } 
    #navbar.mobile .nav_elements .nav_element {
        transition: opacity var(--menu-transition);
    } 
    .nav_elements {
        overflow-x: hidden;
        width: 100%;
        pointer-events: none;
        background-color: transparent;
        transition: background-color var(--menu-transition);
    }
    .nav_icon {
        display: block;
        /* align-self: center; */
    }
    #navbar.mobile .nav_elements {
        pointer-events: all;
        /* background-color: rgba(16,0,36,1); */
        background-color: #111;
    }
    #navbar .nav_elements {
        /* flex-basis: 100%; */
        /* position: relative; */
        position: absolute;
        flex-direction: column;
        left: 0;
        /* min-width: 0; */
        align-self: flex-start;
        top: var(--mobile_menu_y_offset);
        pointer-events: none;
    }
    #navbar.mobile .nav_elements .nav_element {
        opacity: 100;
    }
    #navbar.mobile .nav_elements .nav_icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    /* this is where the nav becomes visible !!!!! */
    /* EXTREMELY IMPORTANT */
    #navbar.mobile .nav_elements .nav_element {
        float: none;
        /* height: auto; */
        display: block;
        text-align: left;
        width: 100%;
        opacity: 100%;
    }

}