body{
  margin: 0;
  background-image: linear-gradient(to top, #efa495,#edc58a);
}
h1,h2,h3,p{
  text-align: center;
}
hr{
  width: 80%;
}
#main{
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
}
.book_summary{
    display: flex;
    flex-wrap: wrap;
    justify-content:center;
    gap: 10px;
}
.card{
    background-color:whitesmoke;
    border:2px solid black;
    border-radius:10px;
    width: 65vw;
    height: auto;
    box-shadow: 5px 5px;
}
.reflection{
padding: 20px;
    display: flex;
    flex-wrap:wrap ;
    justify-content:center;
    gap: 10px;
    margin: auto;
}
thead{
  background-image: linear-gradient(rgb(240, 203, 203),rgb(170, 195, 173));
}
table{
  width: 100%;
  padding: 10%;
  border-collapse:collapse;
}
tr{
  height: 10vh;
  border-top: .5px solid black;
  border-bottom: .5px solid black;
}
td{
  text-align: center;
}
tr[class="read"]{
  background-image:linear-gradient(to top,#76b36c,white);
}
tr[class="to-read"]{
  background-image:linear-gradient(to top,#e09f86,white);
}
tr[class="in-progress"]{
  background-image:linear-gradient(to top,rgb(154, 150, 81),white);
}
span{
  display:inline-block;
}
tr[class="in-progress"] span[class="status"]{
border:1px solid black;
border-radius:10px;
background-image:linear-gradient(yellow);
}
tr[class="read"] span[class="status"]{
border:1px solid black;
border-radius:10px;
background-image:linear-gradient(rgb(77, 132, 77));
}
tr[class="to-read"] span[class="status"]{
border:1px solid black;
border-radius:10px;
background-image:linear-gradient(red);
}
span[class="status"],span[class^="rate"]{
  width: 80%;
  height: auto;
  padding: 5px;
}

span[class^="rate"] > span {
border:1px solid black;
border-radius:25px;
margin:5px;
height:15px;
width:15px;
background-color:rgb(255, 255, 255);
}
span[class~="one"] span:nth-child(1)
{
  background-image:linear-gradient(rgb(255, 119, 0))
}
span[class~="two"] :nth-child(1),span[class~="two"] :nth-child(2)
{
  background-image:linear-gradient(rgb(255, 119, 0))
}
span[class~="three"] > span
{
  background-image:linear-gradient(rgb(255, 119, 0))
}