body {
  font-family: Arial, sans-serif;
  background-image: linear-gradient(#ffe5ff, #b893b8);
  background-attachment: fixed;
  margin: 20px;
}

h1, h2 {
  color: #331d33;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 30px;
  background-color: rgba(255, 255, 255, 0.85);
}

th, td {
  padding: 12px;
  text-align: left;
  border: 1px solid rgba(0, 0, 0, 0.1);
  vertical-align: top;
}

th {
  background-color: #5e3b5e;
  color: #ffffff;
}

.pitch {
  font-size: 0.9em;
  margin: 6px 0 0 0;
  color: #444;
}

tr[class="read"] {
  background-image: linear-gradient(#d0f2d8, #b0ebbe);
}

tr[class="to-read"] {
  background-image: linear-gradient(#e5ccce, #fbb5bc);
}

tr[class="in-progress"] {
  background-image: linear-gradient(#f4ecd4, #e5d9b1);
}

span {
  display: inline-block;
}

tr[class="to-read"] span[class="status"] {
  border: 1px #e67fb3 solid;
  background-image: linear-gradient(#cc0066, #e67fb3);
  color: white;
  border-radius: 4px;
}

tr[class="read"] span[class="status"] {
  border: 1px #66ff66 solid;
  background-image: linear-gradient(#42a442, #66ff66);
  color: white;
  border-radius: 4px;
}

tr[class="in-progress"] span[class="status"] {
  border: 1px #ffd11a solid;
  background-image: linear-gradient(#ffcc00, #ffff66);
  white-space: nowrap;
  border-radius: 4px;
}

span[class="status"], span[class^="rate"] {
  height: 25px;
  width: 5.5rem;
  padding: 5px;
  text-align: center;
}

span[class^="rate"] > span {
  border: 1px black; 
  border-radius: 5px;
  margin: 8px;
  height: 10px;
  width: 10px;
  background-color: black;
  /* I used AI for the clip path because I didn't like the circles for the stars, rest my own. Promise. No idea how to do clip path right now. */
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  transform: scale(3); 
}

span[class~="one"] span:first-child {
  background-image: linear-gradient(#ffff00, #eded5f);
}

span[class~="two"] span:nth-child(-n+2) {
  background-image: linear-gradient(#ffff00, #eded5f);
}

span[class~="three"] span {
  background-image: linear-gradient(#ffff00, #eded5f);
}

.why-books {
  background: #dcf0d7;
  padding: 15px;
  border-radius: 4px;
}