@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/npm/@xz/fonts@1/serve/metropolis.min.css");

/*
    Filename: navbar_style.css
    Author: Gabriel Beltran
    Date: 6/22/2022
    Purpose:

*/

img
{
    width: 90%;
    transition: width 500ms ease;
}

.self_navbar
{
    position: fixed;
    background-color: #e3e5eb;
    font-family: 'Metropolis', sans-serif;
    transition: width 500ms ease;
}

.self_navbar-nav
{
    list-style: none;
    display: flex;
    flex-direction:  column;
    align-items: center;
}

.self_nav-item
{
    width: 100%;
}


.self_nav-link {
    display: flex;
    align-items: center;
    height: 5rem;
    color: #525460;
    text-decoration: none;
    filter: grayscale(100%) opacity(0.7) ;
    transition: 500ms ease;
    font-weight: bolder;
}

.link-text
{
    display: none;
}

.self_nav-link svg
{
    min-width: 2rem;
    margin: 0 1.5rem;
}



/*TRANSTIONAL STYLES*/
svg
{
    fill: #525460;
}


.self_nav-link-logo {
    display: flex;
    align-items: center;
    height: 5rem;
    color: whitesmoke;
    text-decoration: none;
    filter: grayscale(100%) opacity(1.0) ;
    transition: 500ms ease;
    padding: 5px;
}


/*SMALL SCREENS*/
@media only screen and (max-width: 767px)
{
    .self_navbar:hover img
    {
        width: 90%;
        transition: width 200ms ease;
    }

    .self_nav-link
    {
        background-color: #F6F6F6;
        color: #dddddd;
        border-radius: 20px;
        margin-top: 10px;
    }

    .self_navbar
    {
        bottom: 0;
        width: 100%;
        height: 5.5rem;
        padding-bottom: 10px;
    }

    .self_nav-link-logo
    {
        display: none;
    }

    .self_navbar-nav
    {
        margin-left: 10%;
        padding: 0;
        flex-direction: row;
        width: 75%;
        justify-items: center;
        height: 100%;
    }

    .self_nav-item
    {
        padding-left: 20px;
        align-items: center;
    }

    .self_nav-link{
        justify-content: center;
    }

    main
    {
        margin: 0;
    }

}

/*large screen */
@media only screen and (min-width: 767px)
{
    .self_nav-item:last-of-type
    {
        bottom: 0;
        position: absolute;
    }

    .self_navbar
    {
        top: 0;
        width: 5rem;
        height: 100vh;
    }

    .self_nav-item:last-of-type
    {

    }

    .self_navbar:hover
    {
        width: 12rem;
    }

    .self_navbar:hover .link-text
    {
        display: inline;
        transition: opacity 500ms ease;
    }

    .self_navbar:hover img
    {
        margin-top: 20px;
        width: 60%;
        transition: width 500ms ease;
    }
    /*WITH NAVLINK LOGO*/
    .self_nav-link-logo:hover
    {
        color: #525460;
        padding-bottom: 5px;
    }

    .self_nav-link:hover
    {
        background-color: #F6F6F6;
        color: #525460;
        border-radius: 20px;
        margin: 10px;
    }

    .self_navbar-nav
    {
        padding: 0;
        margin: 0;
    }

}