tr[class="read"]{background-image: linear-gradient(146deg,#ff0000 44%, #00ffee 44%);
display:inline-block
}
tr[class="to-read"]
{background-image: linear-gradient(202deg, #ff00f7 1%, #00ff2a 100%);
display:inline-block}
tr[class="in-progress"]{background-image:linear-gradient(349deg, #8a3cb4 16%, #e6b36b 100%);
display:inline-block}
span{
  display:inline-block;
}
tr[class="to-read"] span[class="status"]{
border:3px solid red;
background-image:linear-gradient(349deg, #3c9cb4 16%, #267d30 100%);
}
tr[class="read"] span[class="status"]{
border:3px solid purple;
background-image:linear-gradient(154deg, #d20404 0% , #00ccc9 100%);
}
tr[class="in-progress"] span[class="status"]{
border:3px solid gold;
background-image:linear-gradient(30deg, #933939 0%, #d20404 100%);
}
span[class="status"], span[class^="rate"]{
  height:45px;
  width:75px;
  padding:35px;
}
span[class^="rate"]>span{
border:1px solid black; 
border-radius:1px; 
margin:1px;
height:10px;
width:10px;
background-color:white;

}
span[class~="one"]>span:first-child{
  background-image:linear-gradient(148deg, #e3f77d 38%, #c1bebe 100%);

}
span[class~="two"]>span:nth-of-type(-n+2){
  background-image:linear-gradient(148deg, #e3f77d 38%, #c1bebe 100%);

}
span[class~="three"] span {
  background-image:linear-gradient(148deg, #e3f77d 38%, #c1bebe 100%);

}

tr{
  display:grid;
  grid-template-columns:3.2fr 3fr 3fr 2.8fr 2.6fr;
}
tr{
  text-align:left;
}
body{
background-color:black;
}
h1{
  color:rgb(191, 27, 27)
}
th{
  color:white;
}
tr,.row{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
}
td,tr>span.row>span{
  width:20%;
  box-sizing:borderbox;
}
body, main, table{
min-width: 800px;
overflow-x:auto;
}
span{
  display:inline-block;
  white-space:no wrap;
  overflow:hidden;
}
th{
  padding:1px 35px 1px 1px
}
th, td{
  white-space:nowrap;
  min-width:120px;
}