body{background-color: rgb(251, 247, 243);
    

}
body a {
    text-decoration: none;
}
nav  {
    background-color: rgb(253, 250, 246);
    font-family:sans-serif;
    width: 100%;
    height: 4em;
    color: black;
    border-bottom: rgb(240, 236, 228) solid 2px;

    
}



@media (min-width: 767px) and (max-width: 1024px) {
    nav {
        height: 5em;
    }
}



.logo{
    width: 100%;
    height: auto;
    
    margin-top: 1%;
}
nav a {height: 3em;
       line-height: 3em;    
     }

.menu_nav{
    float: right;
    width: 10%;
    height: 10%;
    
    margin-top: 1%;

}

.navitem{
    font-size: 100% ;
    float: right;
    margin-left: 7%;  
     
}

.length_button , .category_button , .level_button{
    cursor:pointer;
}

.length_menu , .category_menu ,  .level_menu{
    background-color: WHITE;
    height:auto;
    display: none;
}

.length_menu.show , .category_menu.show , .level_menu.show{
    display: block;
}





.drop_down_item{
    background-color: white;
    float: left;
    margin-left: 2%;
    margin-right: 7%;
    margin-top: 1%;
    margin-bottom: 1%;
    font-family:sans-serif;
    color: black;
}

nav a{

color: black;
}

.write:link{color:white;
       
}
a:visited{color:black

}
.write{background-color: black;
       color: white;
       width: +8.5%;
       border-radius: 14%;
       text-align: center;
       width: 5.6em;
       
       
}
.write:visited{color:white}

 /* nav mobile*/

 .mobile_menu , .length_menu , .level_menu , .category_menu{
    background-color: white;
    font-family: sans-serif;
 }

 .mobile_menu_item a{
    background-color: white;
    font-size: 150%;
    color: black;
    display: flex;
    justify-content: center;
    margin-top: 2.5%;
    margin-bottom: 2.5%;

 }

.mobile_drop_down_item a{
    display: block;
}


.mobile_length_drop_down_menu , .mobile_category_drop_down_menu , .mobile_level_drop_down_menu {
    display: none;
}

.mobile_length_drop_down_menu.show , .mobile_category_drop_down_menu.show , .mobile_level_drop_down_menu.show {
    display: block;
}

.mobile_menu {
    display: none;
}

.mobile_menu.show {
    display: block;
}

 
/* footer*/
.footerclass{background-color: rgb(253, 250, 246);
    border-top: 1px rgb(240, 236, 228) solid;
    color:black;
    font-family: sans-serif;
    margin-top: 4%;
    }

.footerlogo{
    margin-top: 5%;
    margin-bottom: 5%;


}

.footertitle{
    color:black;
    
    font-size: 110%;
}

.footerdetail{
    color: rgb(64, 64, 64);
    font-size: 100%;
}