/*
the css of the navbar
*/
.navbar
{
    height: 10vh;
    max-height: 6rem;
    min-height: 4rem;
    width: 100%;
    background-color:#052f4a;
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-content:flex-start;
    border-radius: 0px 0px 1rem 1rem;
}
/*
the css of one navbar child 
*/
.navbar_child
{
    height: 100%;
    display:flex;
    flex-direction: row;
    align-items:center;
    justify-content:center;
    text-align: center;
    background-color:none;
    color: #ffffe0;
    font-size: 1rem;
    font-weight: bold;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    margin-left:1rem;

}
/*
the first child of the navbar is the assignment name
which should always located at the left edge of the navbar
*/
.navbar_child:first-child
{
    margin-right:auto;
    margin-left:3rem;
}

/*
the last navbar child should keep some distance to the right edge
of the navbar
*/
.navbar_child:last-of-type
{
    margin-right:3rem;
}

/*
control the opacity of the links when hover
*/
.navbar_child:not(:first-of-type) :hover
{
    opacity: 0.5;
    font-weight: bolder;
}


/*
the css of the image in one navbar child
*/
.child_image
{
    object-fit:cover;
    height: 3rem;
    width: 3rem;
    border-radius: 50%;
}

/*
the menubar should not be visible if the screen is wilder than 650px
*/
.navbar_menubar
{
    display:none;
}

/*
when the menubar icon is hovered, the menutable should be visible
*/
.navbar_menubar:hover .navbar_menutable
{
    visibility: visible;
}

/*
the css of dropdown menutable
*/
.navbar_menutable{
    width:fit-content;
    height:fit-content;
    background-color:#052f4a;
    position:absolute;
    top: 2rem;
    left:-2rem;
    display:flex;
    visibility: hidden;
    flex-direction:column;
    justify-content: flex-start;
    align-items: center;
    border-radius: 0.5rem;
    border-color:none;
}
/*
style of the item in the menu table
*/
.menutable_child{
    display:flex;
    width:fit-content;
    align-items:center;
    justify-content:center;
    text-align: center;
    background-color:none;
    color: #ffffe0;
    font-size: 1rem;
    font-weight: bold;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    margin-bottom: 1rem;
    margin-left:1rem;
    margin-right:1rem;
    padding:0.5rem;
    border-radius: 0.2rem;
    
}

/*
style of the first item in the menu table
it should keep some distance to the top edge of the menutable
*/
.menutable_child:first-child
{
    margin-top:1rem;
}

/*
the css of one menutable child he hovered
*/
.menutable_child:hover{
    opacity: 0.5;
    background-color: #ffa500;
}

/*
link css
*/
a
{
    color:#ffffe0;
}

/*
css of the link when clicked
*/
a:link,a:active{
    text-decoration:none;
    color:#ffffe0;
}

/*
if the screen width is smaller than 650px
*/
@media screen and (max-width: 650px)
{
    /*
    only keep the first child of navbar visible
    */
    .navbar_child:not(:first-of-type){
        display:none;
    }
    /*
    let the menubar group visible, make a margin to the right edge of the navbar
    */
    .navbar_menubar{
        display:flex;
        position: relative;
        margin-right:3rem;
    }
    
}