body {
  box-sizing: border-box;
  font-family:sans-serif;
  background-image: url(https://smiller11.infprojects.fhsu.edu/project3/image.png);
}

table {
  color: #3d2d21;
  font-family:sans-serif;
}

p {
   color: #C8A060;
  font-family:sans-serif;
  text-align: center;
}

h1 {
  color: #C8A060;
  text-align: center;
  font-family:sans-serif;
  background-image: linear-gradient(to top, #2F2420, #7B5A44);
}

h2 {
  color: #2A4736;
  text-align: center;
  font-family:sans-serif;
}

span {
  display: inline-block;
}

th {
  color: #C8A060;
 background-image: linear-gradient(to top, #2F2420, #7B5A44);
}


tr[class="read"] {
 background-image: linear-gradient(to right, #48775b, rgb(135, 185, 135), rgb(133, 180, 149)); 
}

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


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


tr[class="read"] span[class="status"] {
  font-weight: bold;
 border: 2px solid #895737;
   background-image: linear-gradient(to right rgb(177, 248, 177), rgb(12, 222, 78));
}


tr[class="in-progress"] span[class="status"] {
  font-weight: bold;
  border: 2px solid #895737;
 background-image: linear-gradient(lightgreen, rgb(10, 285, 70));
}


tr[class="to-read"] span[class="status"] {
  font-weight: bold;
  border: 2px solid #895737;
  background-image:linear-gradient(khaki, rgb(196, 183, 112));
}


span[class="rate"], span[class="status"] {
  height: 30px;
  width: 120px;
  padding: 7px;
  margin: 1px;
}

span[class="status"], span[class^="rate"] {
  height: 30px;
  width: 120px;
  padding: 7px;
  margin: 1px;
}

span[class^="rate"] span{
  border: 2px solid #895737;
  border-radius: 50%;
  margin: 0 5px;
  height: 15px;
  width: 15px;
  background-color: rgb(245, 241, 241);
}

span[class~="one"] span:first-child{
  background-image: linear-gradient(to left, #9e9a95, lightblue);
}


span[class~="two"] span:first-child,
span[class~="two"] span:nth-child(2) {
  background-image: linear-gradient(to left, #9e9a95, lightblue);
}

span[class~="three"] span{
 background-image: linear-gradient(to left, #9e9a95, lightblue);
}



span[class~="three"] span:first-child, span [class="three"] span:nth-child(2){
  background-image: linear-gradient (#E6E1DA, lightblue);
}




tr[class="read"] span[class="status"] {
  background-image: linear-gradient(to right, lightgreen, rgb(189, 249, 189));
}

tr[class="in-progress"] span[class="status"] {
  background-image: linear-gradient(to right, #e5a28b, rgb(245, 245, 249));
}


span[class^="rate"] > span {
  border: 2px solid #895737;
  border-radius: 50%;
  margin: 0 5px;
  height: 15px;
  width: 15px;
  background-color: #FDFBF7;
}

.why {
  background-image: linear-gradient(to top, #2F2420, #82614b);
}