style.css

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body{
    /* font-family: Arial, Helvetica, sans-serif; */
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

div.navbar{
    font-weight: bolder;
    width: 100%;

    position: sticky;
    top: 0px;

    /* background-color: white; */
    height: 70px;
    /* width: 100%; */
    /* min-width: 1300px; */
    /* height: 70px; */
   z-index: 5;
}

div.navbar ul{
    list-style-type: none;
    display: flex;
    font-size: 30px;
    height: 60px;
  
}

div.navbar ul li{
    /* margin-right:10%; */
    margin-right: 5%;
}

div.navbar ul li#home{
    margin-left: 40%;
}



#logo{
    height:120px;
    margin-top: -40px;
    margin-right: 20%;
}

#log_in{
    margin-left: 10%;
    /* display: inline-block; */
   
}

#log_in a{
    background-color: green;
    color: rgb(255, 255, 255);
    border-radius: 5px;
    text-indent:10px;
    height: 30px;
    width: 120%;
    line-height: -5px;
    
}

#log_in a:hover{
    background-color: rgb(9, 90, 9);

}

div.navbar ul li a{
    display: inline-block;
    width: 200%;
    text-decoration: none;
    margin-top: 10px;
    font-size:20px;
    color: rgb(14, 49, 50);
    /* color: red; */
    
}

div.navbar ul li a:hover{
    color: green;
}

button#menu{
    border: none;
    background-color: white;
    /* margin-left: 80%; */
    margin-top: 10px;
    margin-right: 2%;
    
    
}



div.menu_container{
    float: right;
    display: none;
    margin-top: -90px;
    /* position: fixed; */
    left: 80%;
   
    

}

button#menu img{
    height: 30px;
}

div#menu_items{
    display: none;
    background-color: green;
    height: 510px;
    width: 100%;
    min-width: 300px;
    margin-top: -50px;
    display: none;

}

div#menu_items ul li{
    text-align: center;
    margin-top: 80px;

}

div#menu_items ul li a{
    color: rgb(236, 244, 241);
    text-decoration: none;
    font-weight: bolder;
    font-size: 40px;


}


div.footer{
    background-color: green;
    height: 60px;
    padding-top: 10px;
    font-weight: bolder;
    color: black;
    text-align: center;
    background-color: green;
    color:white;
   

    /* background-size: contain; */

    /* position: absolute; */
    /* width: 200%; */
    /* left: 0;
    right: 0; */

    /* min-width: 1200px; */
    /* overflow-x: hidden; */
    /* display: inline-block; */

    /* width: 100%; */
    
    /* display: inline-block; */
    /* width: 100%; */
    /* display: flex;
    justify-content: center;
    align-items: center; */
    /* width: 108em; */
    /* width:200%; */
    /* min-width: 1300px; */
    

}




@media  screen and (min-width:1500px) {
    div.navbar ul{
    background-color: white;

    }
}



@media screen and (max-width:1200px) {
    div.navbar ul li#home{
        margin-left: 50%;
    }

 
    
}


@media screen and (max-width:1000px) {
    div.navbar ul li#home{
        margin-left: 60%;
    }
    
}

@media screen and (max-width:900px) {
    div.navbar ul li#home{
        margin-left: 70%;
    }

  
    
}


@media screen and (max-width:800px) {
    div.navbar ul li#home{
        margin-left: 85%;
    }

 
    
}

@media screen and (max-width:700px) {
    div.navbar ul li#home{
        margin-left: 100%;
    }

  
    
}

@media screen and (max-width:600px) {
    div.navbar ul li#home{
        margin-left: 120%;
    }

}

@media screen and (max-width:550px) {
    div.navbar ul li#home{
        margin-left: 140%;
    }

  
    
}

@media screen and (max-width:500px) {
    div.navbar ul li#home{
        margin-left: 160%;
    }


    
}





@media screen and (max-width:400px) {



    
   div.menu_container{
    /* z-index: 5; */
    display: block;
    /* height: 100%; */
    height:min-content

   }

   div.navbar{
    /* visibility: hidden; */
    height: 90px;
    position: static;
   }






   div.navbar ul li.nav_item{
    display: none;
   }

   #logo{
    height:120px;
   }

   div.image{

    display: none;
    /* height: 200px;
    width: 500px; */
    /* width: 100%; */
    /* height: 100px; */
   }

   button#menu{
    margin-right: 20px;
  }
  




  
}