/* Defines the navbar style, including spacing of elements within it */
nav {
    box-sizing: border-box;
    width: 100%;
    max-height: 100px; 
    min-height: 30px;
    height: 8vh;
    background-color: #154e63;
    display: flex;
    justify-content: space-between; 
    align-items: center;
    color: #ccc;
}

.nav-title{
    margin-left: 10vw;
}

/* Removes bullet points, aligns elements horizontally and centers vertically */
nav .nav-links ul {
    list-style: none;
    display: flex;
    align-items: center;
    margin-right: 10vw;
}

.nav-links-mobile ul {
    list-style: none;
}


/* Adjusts spacing between list items */
nav .nav-links ul li {
    margin-left: 3vw; 
}

/* Adjusts spacing between list items */
nav .nav-links-mobile ul li {
    margin-top: 2vh; 
}

/* Makes links white and removes underline */
nav .nav-links ul li a, .nav-links-mobile ul li a{
    color: #ccc; 
    text-decoration: none; 
}

/* Adjusts size of LinkedIn image */
nav .nav-links ul li a img {
    width: 5vh; 
    height: 5vh;
    min-height: 20px;
    min-width: 20px;
    max-height: 30px;
    max-width: 30px;
}

/* Translucent effect on hover */
nav .nav-links ul li a:hover {
    opacity: 0.5; 
}

.nav-links-mobile ul li a:hover {
    opacity: 0.5; 
}

/* Changes cursor to pointer when hovering over button,  */
.menu-button {
    cursor: pointer; 
}

/* Adjusts size of menu button image */
.menu-button img {
    width: 5vh; 
    height: 5vh;
    min-height: 20px;
    min-width: 20px;
    max-height: 30px;
    max-width: 30px;
    margin-right: 10vw;
}

/* Translucent effect on hover over menu button */
.menu-button:hover {
    opacity: 0.5;
}



/* Media query to hide nav links and display the menu button when browser width is less than 650px */
@media (max-width: 650px) {
    nav .nav-links ul {
        display: none;
    }

    .menu-button {
        display: block; /* Display menu bar button when browser window < 650px */
    }

    .nav-links-mobile {
        display: none; 
        flex-direction: column;
        justify-content: top;
        position: absolute;
        top: 14vh;
        width: 100%;
        height: 100%;
        background-color: #0c323f;
        z-index: 5;
        position: fixed;

    }


}

/* Media query to hide menu button. Media query necessary since permanently hidden without */
@media (min-width: 651px) {
    .menu-button {
        display: none; 
    }
    .nav-links-mobile {
        display: none; 
    }
    .nav-links-mobile ul {
        display: none; 
    }

}