body{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    
    
}
img{
  max-width: 100%;
}



/* -------------------NAVBAR-------------------------- */

.main-menu {
    display: flex;
    justify-content: space-between;
    background: #23323a;
    padding: 5px;
    position: relative;
    position: fixed;
    z-index: 99999;
    width: 100%;
  }
  .main-menu ul{
    
   margin-bottom: 0px !important;
  
  }
  
  
  .main-menu ul li {
    display: inline-block;
    padding-top: 8px;
  }
  
  .main-menu li a {
    color: white;
    padding: 15px 35px;
    display: block;
    font-size: 17px;
    text-decoration: none;
   
  }
  .main-menu li a:hover{
  background: #2f434e;
  border-radius: 5px;
  transition: 1s;
  }
  
  i.bi.bi-envelope-fill{
    color: #8cb6c1;
    font-size: 25px;
    padding: 18px 14px;
    cursor: pointer;
    position: absolute;
    right: 30px;
    top: 5px;
  }
  i.bi.bi-envelope-fill:hover{
    background: #2f434e;
  transition: 1s;
  }
  
  i.bi.bi-three-dots-vertical {
    color: white;
    font-size: 25px;
    padding: 18px 14px;
    cursor: pointer;
    display: none;
  }
  i.bi.bi-three-dots-vertical:hover {
  background: #2f434e;
  transition: 1s;
  
  }
  .juwel{
    display: none;
  }









h2{
    background-color: chartreuse;
    text-align: center;
    font-style: bold;
    height: fit-content;
    width: max-content;

}
h1{
    margin-left: 5px;
}
p{
    background-color: linen;
}
button{
    height: 40px;
    width: 200px;
    background-color: crimson;
    color: aliceblue;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin-left: 5px;
}
button:hover{
    background-color: rgb(200, 222, 241);
    color: crimson;
    transition: 0.4s;
}
footer {
  height: 60px;
  width: 100%;
  padding: 18px 10px;
  background: darkslategrey;
  color: white;
  text-align: center;
  text-transform: capitalize;
}




  

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

    /* -----------------------------navbar responsive---------------------- */
 
   .main-menu img{
     height: 65px;
     position: relative;
     top: 0px;
   } 
   .main-menu{
     position: relative;
     position: fixed;
   }
   .main-menu ul {
     display: none;
     margin-top: 77px;
     right: 0px;
     height: auto;
     width: 260px;
     position: absolute;
     background: rgb(53 93 129);
     padding: 1px;
     box-shadow: 5px 1px 20px black;
     border-radius: 5px;
    z-index: 9999;
    overflow-x: hidden;
     
   }
   .main-menu ul li{
     width: 260px;
   }
 
 .main-menu ul li a{
   color: white;
   padding: 13px 115px;
   display: block;
   font-size: 17px;
   text-decoration: none;
   
 }
   i.bi.bi-three-dots-vertical {
     display: block;
     }
     i.bi.bi-envelope-fill{
     
       right: 48px;
       top: 5px;
     }
     .juwel{
       display: block;
       color: cornsilk;
       padding: 0px 5px;
       font-size: 20px;
       position: relative;
       top: 25px;
       font-family: monospace;
     }
    }