/* breakdowns  */

@media (max-width: 1000px){
    nav a{
        padding: 1rem 1.5rem;
    }
}
@media (max-width: 850px){
    nav a{
        padding: .5rem 1.5rem;
    }
}


@media (max-width: 780px){
   #menuIcon {
    display: block;
    margin: 0 1.5rem;
   }
   nav {
    margin: unset;
    position: absolute;
    top: 100%;
    left: 5vw;
    width: 90vw;
    padding: 1rem 3%;
    background: var(--bg-color);
    border-top: .1rem solid rgba(0,0,0,.2);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.2);
    display: none;
   }
   nav.active{
    display: block;
   }

   nav a{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin: 1rem 0;
   }
}

 /* @media (max-width: 600px){

} */
@media (max-width: 400px){
    .logo a {
        display: none;
    }
    .logo-small a {
        display :block;
    }
}


 @media (max-width: 380px){
    
 }