body {
  background: #FAFBFF;
  margin-left: 40px;
  margin-right: 40px;
}

h1 {
  color: #0018A4;
  font-family: Futura, sans-serif;
  font-weight: 700;
  font-style: bold;
  font-size: 64px;
}

.filter {
  display: grid;
  grid-template-columns: 600px 400px 400px;
  align-items: start;
  gap: 10px;
  padding: 16px;
}

.genre {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 600px;
}

.genre h2 {
  flex-basis: 100%;
}

.genre-button {
flex: 0 0 auto;
background-color: #CCFFE2;
color:#0018A4;
font-family: Futura, sans-serif;
font-size: 18px;
border-radius: 50px;
padding: 8px 16px;
cursor: pointer;
width: fit-content;
border: 2px solid transparent;
}

.genre-button:hover {
  background-color: #CCFFE2;
  color: #0018A4;
  border: solid 2px;
  border-color: #0018A4;
}

.genre-button.selected {
  background-color: #0018A4;
  color: white;
  border: 2px solid #0018A4;
}

.rating {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 10px;
  justify-content: start;
  max-width: 400px;
}

.rating h2 {
  grid-column: 1 / -1;
}

h2 {
  color: #000000;
  font-family: Futura, sans-serif;
  font-weight: 700;
  font-style: bold;
  font-size: 22px;
}

.sorting-button {
background-color: #FFECEA;
color:#0018A4;
font-family: Futura, sans-serif;
border-radius: 50px;
font-size: 18px;
padding: 8px 16px;
cursor: pointer;
border: 2px solid transparent;
}

.sorting-button:hover {
  background-color: #FF6589;
  color: #FFFFFF;
  border: 2px solid;
  border-color: #0018A4;
}

.sorting-button.selected {
  background-color: #FF6589;
  color: white;
}

.random {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 400px;
}

.random-button {
flex: 0 0 auto;
background-color: #FFECEA;
color:#0018A4;
font-family: Futura, sans-serif;
font-size: 18px;
border-radius: 50px;
padding: 8px 16px;
cursor: pointer;
border: 2px solid transparent;
width: fit-content;
}

.random-button:hover {
  background-color: #FF6589;
  color: #FFFFFF;
  border: 2px solid;
  border-color: #0018A4;
}

.books {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.book-label {
  font-weight: 600;
}

.card {
  padding: 20px;
  border: 1px solid #E9E9E9;
  border-radius: 10px;
  font-family: Futura, sans-serif;
}

.card:hover {
box-shadow: 0 8px 16px 0 #0018A4;
}

.card img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 12px;
}

.card h3 {
  margin-bottom: 5px;
  color: #000000;
  font-family: Futura, sans-serif;
  font-weight: 700;
  font-style: bold;
  font-size: 22px;
}

.card h4 {
  margin-top: 0;
  color: #000000;
  font-family: Futura, sans-serif;
  font-size: 18px;
  font-weight: 700;
}

.card p {
  color: #000000;
  font-family: Futura, sans-serif;
  font-weight: 400;
  font-style: medium;
  font-size: 16px;
}