body{
  background-color: #F5EED8;
  font-family: "Geramond" serif;
}

.h1{
  background-color: #6B3A18;
  width: 300px;
  text-align: center;
  margin: 35px auto;
  border-radius: 50px;
  color: #F5EED8;
  padding: 0 30px; 
  border: 3px solid #d3af37;
}
table{
  background-color: #6B3A18;
  border: 5px solid #6B3A18;
  color:#1d0200;
  font-size: 20px;
  margin: 40px auto;
  border-radius: 20px
}

th{
  text-align: center;
  color: #F5EED8;
  border-bottom: 3px solid #d3af37;
  border-top:3px solid #d3af37;
  background: linear-gradient(#7B4620, #5E3215 60%);
  color: #F5EED8;
   text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}
thead{
  
  text-weight: bold;
}

tr[class="read"]{
  background: #c3b1a2
}

tr[class="to-read"]{
  background: #d9c1a8;
}

tr[class="in-progress"]{
  background:  	#f8e8d8
}

span{
  display:inline-block;
}

tr[class="read"] span[class="status"]{
   background-image: linear-gradient(to bottom, white,#F5EED8 75%);
   border: 2px solid #6B3A18;
   color: #6B3A18;
   font-weight: bold;
   text-align: center;
   border-radius: 10px;
   padding: 10px 5px;
   margin: 5px
  
}

tr[class="to-read"] span[class="status"]{
  background-image: linear-gradient(to bottom, white,#F5EED8 75%);
   border: 2px solid #6B3A18;
   color: #6B3A18;
   font-weight: bold;
   text-align: center;
   border-radius: 10px;
   padding: 10px 5px;
   margin: 5px
}

tr[class="in-progress"] span[class="status"] {
    background-image: linear-gradient(to bottom, white,#F5EED8 75%);
   border: 2px solid #6B3A18;
   color: #6B3A18;
   font-weight: bold;
   text-align: center;
   border-radius: 10px;
   padding: 10px 5px;
   margin: 5px;
   
}

span[class="status"],
span[class^="rate"] {
  min-width: 75px;
  padding: 9px;
}

span[class^="rate"] > span{
  border: 2px solid black;
  border-radius: 5px;
  height: 10px;
  width: 6px;
  margin: 3px auto;
  background-color: #c3b1a2;
}

span[class~="one"] > span:nth-child(1),
span[class~="one"] > span:nth-child(2),
span[class~="one"] > span:nth-child(3),
span[class~="one"] > span:nth-child(4),
span[class~="one"] > span:nth-child(5),
span[class~="one"] > span:nth-child(6),
span[class~="one"] > span:nth-child(7){
  background: gold;
}

span[class~="two"] > span:nth-child(1),
span[class~="two"] > span:nth-child(2),
span[class~="two"] > span:nth-child(3),span[class~="two"] > span:nth-child(4),
span[class~="two"] > span:nth-child(5),
span[class~="two"] > span:nth-child(6)
{
   background-color:gold;
}

span[class~="three"] > span:nth-child(1),
span[class~="three"] > span:nth-child(2),
span[class~="three"] > span:nth-child(3),
span[class~="three"] > span:nth-child(4),
span[class~="three"] > span:nth-child(5)
{
  background-color: gold;
}
span[class~="four"] > span:nth-child(1),
span[class~="four"] > span:nth-child(2),
span[class~="four"] > span:nth-child(3),span[class~="four"] > span:nth-child(4){
  background-color: gold;
}

span[class~="five"] > span:nth-child(1),
span[class~="five"] > span:nth-child(2),
span[class~="five"] > span:nth-child(3){
  background-color: gold;
}


span[class~="six"] > span:nth-child(1),
span[class~="six"] > span:nth-child(2){
  background-color: gold;
}

span[class~="seven"] > span:nth-child(1){
  background-color: gold;
}

td:nth-child(1) {
  width: 250px;
  padding: 10px;
  text-align: left;
  font-weight: bold;
}

td:nth-child(2),
th:nth-child(2) {
  width: 100px;
  padding: 10px;
  text-align: center
}

td:nth-child(3),
th:nth-child(3) {
  width: 500px;
  padding: 10px;
}

td:nth-child(4),
th:nth-child(4) {
  width: 50px;
  padding: 10px;
  text-align: center
}

td:nth-child(5),
th:nth-child(5) {
  width: 50px;
  padding: 10px;
  text-align: center;
}

td:nth-child(7),
th:nth-child(7) {
  width: 150x;
  padding: 10px;
  text-align: center
}

.top{
  background-color: white;
}

td,
th {
    padding: 12px;
}

.h2{
  background-color: #6B3A18;
  width: 300px;
  text-align: center;
  margin: 35px auto;
  border-radius: 50px;
  color: #F5EED8;
  padding: 0 90px; 
  border: 3px solid #d3af37;
}

main{
  border: 5px solid #6B3A18;
  display: inline-block;
  margin: 10px auto;
  Padding: 10px;
  font-size: 20px;
  background-color: #d9c1a8;
  color: #1d0200;
  border-radius: 20px;
}