table {
  border-collapse: collapse;
  width: 100%;
  font-family: sans-serif;
}

th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.read {
  background-image: linear-gradient(to right, darkred 0%, red 50%, pink 100%);
  color: white;
}

.to-read {
  background-image: linear-gradient(135deg, darkgreen 0%, green 50%, lightgreen 100%);
  color: white;
}

.in-progress {
  background-image: linear-gradient(to top, orange 0%, yellow 50%, white 100%);
  color: #333;
}

tr:hover {
  filter: brightness(1.1);
}

.status {
  display: inline-block;
  height: 1.5em;
  width: 6em;
  padding: 5px;
  text-align: center;
  border-radius: 4px;
  font-weight: bold;
  font-size: 0.8em;
  color: black;
}

.to-read .status {
  border: 1px solid green;
  background-image: linear-gradient(green, white);
}

.read .status {
  border: 1px solid red;
  background-image: linear-gradient(red, white);
}

.in-progress .status {
  border: 2px solid yellow;
  background-image: linear-gradient(yellow, white);
}

.rate {
  display: inline-block;
  padding: 5px;
}

.rate > span {
  border: 2px solid yellow;
  border-radius: 50%;
  margin: 0 2px;
  height: 1em;
  width: 1em;
  background-color: #ccc;
  display: inline-block;
  vertical-align: middle;
}

.one > span:first-child,
.two > span:nth-child(-n+2),
.three > span {
  background-image: linear-gradient(gold, yellow);
  border-color: orange;
}