/*Navbar*/
/*=============================*/
header{
    position: fixed;
    z-index: 10;
    top: 0;

    width: 100%;
    height: auto;
    max-height: calc(100vh - 10px);
    overflow-y: auto;

    background-color: var(--color700);
    color: currentColor;
    
    border-bottom: black solid 3px;
    box-shadow: 0 0 0 4px currentColor,
                0 0 0 7px #000; 
}
    header::-webkit-scrollbar{
        display: none;
    }

nav{
    display: flex;
    flex-direction: column;
    visibility: visible;
    padding: .4em 0;
    justify-content: center;

    font-size: 25px;
    letter-spacing: .15em;
    cursor: pointer;
    
    width: 70%;
    margin: 0 auto;

    user-select: none;
}
    nav i{
        /* Currently used for nav dropdown animation */
        transition: transform .3s, -webkit-transfrom .3s;
    }

.nav__link, 
.nav__dropdown, 
.nav__dropdown-group{
    display: block;
    text-decoration: none;
    color: inherit;
    padding: .1em;
    padding-bottom: .3em;
    border-bottom: solid 2px var(--color700);
    text-shadow: 1px 1px 0px black;
}

.nav_homeBtn{
    padding: .1em 0em;
    padding-bottom: .3em;
}

.links{
    display: none;
}

.navBtn{
    position: fixed;
    top: .6em;
    right: 1.4em;
}

.nav .nav__link:first-child{
    margin-left: 0;
}

/* dropdown */
.nav__dropdown{
    display: block;
    position: relative;
}
.nav__dropdown-name, .nav__dropdown-group-name{
    text-decoration: none;
    color: inherit;
}

.nav__dropdown-links{
    visibility: hidden;
    display: none;

    height: auto;
    max-height: calc(100vh - 62px - 20px);
    overflow-y: auto;

    margin-left: .5em;
    padding: .5rem;

    white-space: nowrap;

    background-color: var(--color700);
}
    .nav__dropdown-links::-webkit-scrollbar{
        display: none;
    }
    .nav__dropdown-links > *{
        border-top: solid 1px var(--textColor);
    }
    .nav__dropdown-links > *:first-child{
        border: none;
    }
    .nav__dropdown-links > *:last-child{
        padding-bottom: 0;
    }




.nav__dropdown-group{
    background-color: var(--color700);
}
    .nav__dropdown-group:last-child{
        margin-bottom: 0;
    }

.nav__dropdown-group-links{
    display: none;
    padding-top: .5em;
}
    .nav__dropdown-group-links *{
        padding: .5em 1em;
    }
    .nav__dropdown-group-links *:not(:first-child){
        border-top: solid 1px currentColor;
    }

.nav__active_visible + *{
    visibility: visible;
}

.nav__active_block + *{
    display: block;
}

.nav__active_visible i,
.nav__active_block i{
    transform: rotate(180deg);
    
}

.nav__dropdown-group-name i,
.nav__dropdown-name i{
    margin-left: -7px;
}

/* Media Queries */
@media (min-width: 65.5rem){
    nav{
        max-width: 60rem;
    }
}


@media only screen and (min-width: 750px){
    header{
        overflow-y: initial;
    }

    nav{
        flex-direction: row;
        justify-content: space-between;
    }

    .navBtn{
        display: none;
    }

    .links{
        display: flex;
        padding-left: 1.4em;
        flex-direction: row;
        justify-content: space-between;
    }

    .links > *{
        padding: 0 1em;
    }

    .nav__dropdown-links{
        margin-left: -.5em;
        position: absolute;
        top: calc(100% + .4em + 3px); 
        border-left: black solid 3px;
        border-right: black solid 3px;
        border-bottom: black solid 3px;
        box-shadow: 4px 4px currentColor,
                    -4px 4px currentColor,
                    7px 7px black,
                    -7px 7px black;
    }
    
    .nav__link:hover, 
    .nav__dropdown:hover{
        border-bottom: solid 2px currentColor;
    }
}