*{
    margin: 0;
    padding: 0;
    
}

body{
    background-color: rgb(9, 9, 143);
    width: 100%;
    height: auto;
    background-image: url('https://i.pinimg.com/736x/a1/99/f3/a199f37446cbe1cd6701c693963971c3.jpg');
    background-blend-mode: color-burn;
}

div{
  width: 100%;
  height: auto;
}

ul.navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgb(85, 87, 88);
  border-bottom: 1px solid rgb(106, 108, 110) ;
  width: 100%;
  display: flex;
  justify-content: center;
}

ul.navbar li {
  display: inline-block;
}

ul.navbar li a {
  display: block;
  color: whitesmoke;
  text-align: center;
  padding: 12px 14px;
  text-decoration: none;
}

ul.navbar li a:hover {
  background-color: #918e8e;
}

/* CSS for the active button */
ul.navbar li.active a {
  background-color: #4CAF50;
  color: white;
}

.main{
    background-color: rgb(8, 8, 87);
    background-image: url('https://w0.peakpx.com/wallpaper/290/679/HD-wallpaper-harry-potter-harry-potter-and-the-chamber-of-secrets-hogwarts-castle.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: lighten;
    display: flex-box;
    text-align: center;
 

}

h1{
    font-size: 50px;
    color: white;
    font-family: Rockwell;
    padding: 15px;
    width: 100%;
    height: auto;

}

p{
    color: rgb(158, 169, 179);
    font-family: Franklin Gothic Medium;
    padding: 20px;
}

.btn{
    padding: 10px 5px;
    background-color: rgb(30, 30, 123);
    color: whitesmoke;
    border:  1px solid transparent;
    border-radius: 10px;
    font-family:Arial, Helvetica, sans-serif;
    margin-bottom: 10px;
}



.img-container{
    padding: 10px;
}
img{
    width: 10%;
    border: 3px solid whitesmoke ;
    border-radius: 10px;
    padding: 8px;
    margin: 20px;
}

.books{
  color: whitesmoke;
  display: flexbox;
  text-align: center;
  font-family: Franklin Gothic Medium;
}
h2{
  font-family: Georgia, 'Times New Roman', Times, serif;
}

.li{
  text-decoration: underline;
  padding: 5px;
  text-decoration-color: #918e8e;
}


table {
  border-collapse: collapse;
  width: 98%;
  color: whitesmoke;
  border:  3px solid #918e8e;
  border-radius: 10px;
  margin-left: 10px;
}

th, td {
  border: 2px solid #918e8e ;
  padding: 8px;
  text-align: center;
}



body {
  font-family: "Arial", sans-serif;
}


.order {
  color: whitesmoke;
  text-align: center;
  padding: 10px;
  display: flexbox;
  font-family: Franklin Gothic Medium;
}

.order input[type="text"], .order input[type="password"] {
  color: WhiteSmoke;
}

.order button {
  background-color: WhiteSmoke;
  color: rgb(74, 76, 79);
  padding: 5px 10px;
}