body {
  font-family: Arial, sans-serif;
  background-color: #1FCECB;
  color: #263238;
  margin: 0;
  padding: 30px;
}

main {
  max-width: 1000px;
  margin: 0 auto;
}

h1 {
  text-align: center;
  color: #243b53;
  margin-bottom: 25px;
}


table {
  width: 100%;
  border-collapse: collapse;
  background-color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
body {
  font-family: Arial, sans-serif;
  background-color: #f4f7fb;
  color: #263238;
  margin: 0;
  padding: 30px;
}

main {
  max-width: 1000px;
  margin: 0 auto;
}

h1 {
  text-align: center;
  color: #243b53;
  margin-bottom: 25px;
}

table {
  width: 100%;
  border-collapse: collapse;
  background-color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

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

th {
  background-color: #243b53;
  color: white;
}

tbody tr:hover {
  filter: brightness(0.97);
}

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

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

tr[class="in-progress"] {
  background-image: linear-gradient(
    to right,
     #dceeff,
    #f4f9ff
  );
}

span {
  display: inline-block;
}

tr[class="to-read"] span[class="status"] {
  border: 2px solid #d49b00;
  background-image: linear-gradient(
    to bottom,
    #fff1b8,
    #ffe082
  );
}

tr[class="read"] span[class="status"] {
  border: 2px solid #218838;
  background-image: linear-gradient(
    to bottom,
    #b7efc5,
    #7ed99a
  );
}

tr[class="in-progress"] span[class="status"] {
    border: 2px solid #1976d2;
  background-image: linear-gradient(
    to bottom,
    #bbdefb,
    #90caf9
  );
}

span[class="status"],
span[class^="rate"] {
  height: 25px;
  width: 100px;
  padding: 3px;
  box-sizing: border-box;
  border-radius: 5px;
 text-align: center;
}

span[class^="rate"] > span {
  border: 1px solid #829ab1;
  border-radius: 50%;
  margin: 2px;
  height: 10px;
  width: 10px;
  background-color: #ffffff;
  box-sizing: border-box;
}
span[class~="one"] > span:first-child {
  background-image: linear-gradient(
    to bottom,
    #ffd54f,
    #ff9800
  );
}
span[class~="two"] > span:nth-child(-n+2) {
  background-image: linear-gradient(
    to bottom,
    #ffd54f,
    #ff9800
  );
}
span[class~="three"] > span {
  background-image: linear-gradient(
    to bottom,
    #ffd54f,
    #ff9800
  );
}
@media (max-width: 650px) {
  body {
    padding: 12px;
  }

  table {
    font-size: 12px;
  }

  th,
  td {
    padding: 8px 5px;
  }

  span[class="status"],
  span[class^="rate"] {
    width: 85px;
     }
}