#library{
   display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 350px));
  grid-template-rows: repeat(2, 275px);
  gap: 10px;
  justify-content: center;
}

.book-container{
padding: 10px;
margin: 10px;
background-color: white;
border-left: 5px solid rgb(2, 200, 249);
border-radius: 10px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
cursor: pointer;
transition: background-color scale 0.15s;
}

.book-container:hover{
  background-color: whitesmoke;
   transform: scale(1.05);
}

.book-title{
font-size: 1.3rem;
font-weight: bold;
text-align: center;
border-radius: 4px;
margin-bottom: 10px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
background-color: lightblue;
transition: color o.15s;
}

.book-title:hover{
  color: rgb(251, 222, 3);
}

.book{
font-weight: bold;
font-size: 1.1rem;
transition: color o.15s;
}

.book-form-info:hover,
.book:hover{
  color:rgb(55, 55, 56);
}

.book-info{
  font-size: 1.4rem;
font-family: "Caveat", cursive;
  font-weight: bold;
  color: rgb(243, 64, 4);
}

.book-info:hover{
    color: rgb(176, 88, 59);
}

.button-container{
display: flex;
flex-direction: column;
align-items: flex-end;
}
.not-read,
.read,
.remove-button{
  border: none;
  background-color: rgb(137, 202, 99);
  color: rgb(13, 99, 77);
  border-radius: 4px;
  padding:0 10px;
  margin: 5px;
  width: 100px;
  cursor: pointer;
}
.read{
  background-color: rgb(0, 145, 255);
  color: white;
}
.remove-button:hover{
  background-color: red;
  color: white;
}

.not-read:hover,
.read:hover{
  background-color: rgb(252, 229, 101);
  color: black;
}