*{
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none; 
  }

  header {
  position: fixed;
  width: 100%;
  background-color:rgb(255, 255, 255);
  height: 8%;
  border-radius: 10px;
  box-shadow: 2px 2px 5px gray;
  margin: 6px 3px;
  z-index: 2;
}
nav {
  display:flex;
  justify-content: space-between;
  align-items: center;
}
nav ul {
  list-style: none;
  display: flex;
  gap: 3rem;
}
nav li{
  padding: 5px 7px ;

}
nav ul li a {
  font-size: 20px;
  text-decoration: none;
  color:black;
  font-weight: 600;
  line-height: 40px;
}
.book{
  background-color: rgb(77, 248, 248);
padding-left: 3px;
  border-radius: 10px;
  margin-right: 5px;
 border: none;
}
.book:hover{
  background-color: rgb(205, 108, 247);
  color: white;
}
nav ul li a:hover {
  color: rgb(2, 189, 192);
  border-radius: 4px;
  transition: all 0.2s ease-in-out;
}
nav a#logo {
  margin-left: 15px;
  margin-top: -19px;
  border-radius: 60px;

}

nav i{
  font-size: 17px;
  line-height: 40px;
}
#ham-menu {
  display: none;
}
nav ul.active {
  left: 0;
}


@media only screen and (max-width: 850px) {
    html{
      font-size: 50%;
    }
      #ham-menu {
        display: inline-block;
        color:black;
      }
      nav a#logo,
      #ham-menu {
        font-size: 30px;
    
      }
      nav a#logo{
       margin-top: 2px;
      }
      nav ul {
        background-color:white;
        position: fixed;
        left: -100vw;
        top: 73.6px;
        width: 100vw;
        height:100vh;
        display: flex;
        flex-direction:column;
        align-items: center;
        transition: 1s;
        gap: 0;
      }
      nav ul li{
        padding: 22px 26px;
      }
      nav ul li i{
        text-align: center;
        overflow: hidden;
      }
    }