html {
  font-family: Verdana
}

.book-title {
  font-style: italic
}

.row-headings {
  background-image: linear-gradient(to top, cyan, lightblue);
  border: 1px solid black
}

body {
  background-color: skyblue
}

.title {
  text-align: center
}

span.status {
  text-align: center;
}

span {
  display: inline-block;
}

span.status {
  height: auto;
  width: auto;
  padding: auto
}

table {
  border-collapse: collapse
}

span.rate {
  height: 10px;
  width: 20px;
  padding: 20px;
  display: flex
}

span.rate span {
  border: 1px solid black;
  border-radius: 30px;
  height: 30px;
  width: 30px;
  background-color: transparent
}


span span.three {
  background-image: linear-gradient(to right, green, darkgreen)
}

tr[class="read"] {
  background-image: linear-gradient(to top, lightgreen, white)
}

span {
  display: inline-block
}

tr[class="to-read"] {
  background-image: linear-gradient(to top, grey, white)
}

tr[class="in-progress"] {
  background-image: linear-gradient(to top, gold, white)
}

tr[class="to-read"] span[class="status"] {
  border: 1px solid black;
  border-radius: 10px;
  padding: 2px;
  background-image: linear-gradient(to top, darkred, red);
  align-items: center;
  width: 130%;
  height: 25px
}

tr[class="read"] span[class="status"] {
  border: 1px solid black;
  border-radius: 10px;
  padding: 2px;
  background-image: linear-gradient(to top, darkgreen, lightgreen);
  align-items: center;
  width: 130%;
  height: 25px
}

tr[class="in-progress"] span[class="status"] {
  border: 1px solid black;
  border-radius: 10px;
  padding: 2px;
  background-image: linear-gradient(to top, gold, yellow);
  align-items: center;
  width: 130%;
  height: 25px
}

span[class="status"], span[class^="rate"] {
  height: auto;
  width: auto;
  padding: 30px
}

span[class^="rate"] > span {
  border: 1px solid black;
  border-radius: 5px;
  margin: 2px;
  height: 20px;
  width: 20px;
  background-color: white;
}

span[class~="one"] > *:nth-child(1) {
  background-image: linear-gradient(to top, green, white)
}

span[class~="two"] > *:nth-child(-n + 2) {
  background-image: linear-gradient(to top, green, white)
}


span[class~="three"] span {
  background-image: linear-gradient(to top, green, white)
}