.navbar{


    width: 100%;



    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--black);

    

  
z-index: 50;


  


}


.logoBars{

  
     
        position: fixed ;
        top:0%;
        padding: .8em;
        min-width: 75%;
        display: flex;
        align-items: center;
        justify-content: space-between;
      
        color: var(--white);
        font-size: var(--navLogo);
       font-weight: bold;
       background-color: var(--black);

/* border: 2px solid red; */

        z-index: 100;

}

.navLogo  {
    display: flex;
    align-items: center;
    justify-content: center;



 
}

 .navLogo .hex{
    height: 3.4rem;
   
}

#bars{
  font-size: var(--navLogo);

  transition-delay: 2.5s;
  


}

.navItems{

    position: fixed;
    top: 0%;
    left: 0%;
    min-height: 100vh;
    width: 100%;
  
    min-width: 25rem;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content:center;
    background-color: var(--black);
    z-index: 50;

/* border: 2px solid gold; */

}




.navItems a {

    /* min-width: 15rem; */

    padding: 1.1em;
    text-decoration: none;
    color: var(--white);

    z-index: 11;
 

    /* border: 2px solid rebeccapurple; */

    font-size: var(--navItems);


 
}

.navItems div:nth-child(4) {
    padding: 1.1em;
    color: var(--white);
}



.navItems a:nth-child(5){
    display: none;
 
    padding-left: 3em;
}
.navItems a:nth-child(6) {
display: none;
    padding-left: 3em;
}
.navItems a:nth-child(7) {
    display: none;
    padding-left: 3em;
}


#nav1{
    padding-bottom: .3em;
border-bottom: .1em solid var(--white);
}



.navItems a :hover{
    transition: 400ms;
    padding-bottom: .3em;
  

border-bottom: .1em solid var(--white);
}

.flags{
    width: 5rem;
   
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: var(--flags);


}

.flags a{
 
    padding: .65em;
}



@media (max-width:68rem){
.logoBars {



        position: fixed;
        top: 0%;
        padding: .8em;
        min-width: 90%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        color: var(--white);
        font-size: var(--navLogo);
        font-weight: bold;
        background-color: var(--black);




        z-index: 100;

    }
.navItems a {

   

    padding: 1.1em;
    text-decoration: none;
    color: var(--white);

    z-index: 11;




    font-size: var(--navItems);




}

.flags a {

    padding: .65em;
}


}












@media (max-width:48rem) {

    .logoBars {



        position: fixed;
        top: 0%;
        padding: .8em;
        min-width: 95%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        color: var(--white);
        font-size: var(--navLogo);
        font-weight: bold;
        background-color: var(--black);



        z-index: 100;

    }





 .navLogo .hex {
     height: 3rem;

 }

.navItems {

    position: fixed;
    top: 0%;
    left: 0%;
    min-height: 100vh;
    width: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--black);
    z-index: 50;



}


.navItems a {

  

    padding: 1.1em;
    text-decoration: none;
    color: var(--white);

    z-index: 11;




    font-size: var(--navItems);


/* border: 2px solid red; */

}

.flags a {

    padding: .65em;
}



}






@media (max-width:22.5rem) {
.navItems {

       

        padding: 1.1em;
        text-decoration: none;
        color: var(--white);

        z-index: 11;

        font-size: var(--navItems);


        padding-right: 4em;




    }


}