body {

  font-family: sans-serif;

  margin: 0;

  padding: 0;

  min-height: 100vh;

  background-image: url('../assets/bg.jpg');  /* Make sure this image exists */

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  background-attachment: fixed;

  color: #222;

}



h1 {

  text-align: center;

  margin-top: 20px;

  color: #fff;

  text-shadow: 1px 1px 3px #000;

}



.desc {

  text-align: center;

  margin-bottom: 20px;

  color: #eee;

  text-shadow: 1px 1px 2px #000;

}



.container {

  max-width: 400px;

  margin: 30px auto;

  padding: 20px;

  background: rgba(255, 255, 255, 0.9);

  border-radius: 8px;

  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);

}



input, button {

  display: block;

  width: 100%;

  margin: 10px 0;

  padding: 10px;

  border-radius: 5px;

  border: 1px solid #ccc;

}



button {

  background-color: #00529b;

  color: white;

  font-weight: bold;

  cursor: pointer;

  transition: background 0.3s;

}



button:hover {

  background-color: #003f7d;

}



nav {

  background: rgba(0, 82, 155, 0.95);

  color: white;

  padding: 10px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  position: sticky;

  top: 0;

  z-index: 1000;

}



nav .center {

  font-size: 1.5em;

  font-weight: bold;

}



nav .right {

  display: flex;

  gap: 10px;

}



nav .right input {

  padding: 5px;

  border-radius: 5px;

  border: none;

}



#bookList .book {

  background: rgba(255, 255, 255, 0.9);

  padding: 10px;

  margin: 10px 0;

  border-left: 5px solid #00529b;

  border-radius: 5px;

  box-shadow: 0 2px 5px rgba(0,0,0,0.1);

}