header{
    height: 10%;
    padding-left: 20px;
    position: absolute;
}
header ul{
    width: 100%;
    float: right;
    list-style: none;
    
}
header .border{
    border-style: solid;
    border-color: var(--primary);
    border-radius: 50px;
    position: relative;
}
header li:nth-child(5):hover{
    background-color: var(--lightGray);
    border-style: solid;
    border-width: 0px;
    border-radius: 50px;
}
header li{
    float: left;
    margin: 0 5px;
}
header a{
    display: block;
    padding: 10px 20px 10px 20px;
    text-align: center;
    text-decoration: none;
    color: var(--black);
    font-size: 20px;
    font-weight: bold;
}
header li:hover{
    background-color: var(--lightGray);
}

@media screen and (max-width: 700px) {
    header{
        padding: 0;
        position: sticky;
        top: 0;
        height: 0;
    }
    #navMenu li:last-child{
        display: block;
    }
    #navMenu .icon{
        position: absolute;
        top: 20;
        right: 20;
        z-index: 10;
    }
    #navMenu{
        position: absolute;
        padding: 0;
        margin: 0;
    }
    #navMenu li {
        margin: 0;
    }
    #navMenu li:not(:last-child){
        display: none;
        background-color: var(--white);
    }
    #navMenu.responsive li:hover{
        background-color: var(--lightGray);
    }
    #navMenu.responsive li:not(:last-child){
        display: block;
        width: 100%;
        border-style: none;
        border-radius: 0;
    }
    
}