/* Book Inventory Project 3 css*/

body {
  background-color: #f4eee4;
  color: #2d3029;
  font-family: Arial, sans-serif;
  line-height: 1.5;
  margin: 0;
}

.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px;
}

header {
  background-color: #315342;
  color: white;
  padding: 26px 30px;
  border-bottom: 5px solid #b7955b;
  border-radius: 5px;
}

h1, h2 {
  font-family: Georgia, serif;
}

h1 {
  font-size: 36px;
  margin: 0;
}

header p {
  color: #f2e2c7;
  margin: 5px 0 0;
}

section {
  margin-top: 30px;
}

h2 {
  color: #315342;
  font-size: 24px;
  margin-bottom: 10px;
}

.reading-count {
  background-color: #e4eadf;
  border-left: 4px solid #315342;
  padding: 10px 15px;
  font-weight: bold;
}

.table-wrapper {
  overflow-x: auto;
  border: 1px solid #d7cdbb;
}

table {
  background-color: #fffdf8;
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
}

th {
  background-color: #315342;
  color: white;
  text-align: left;
  padding: 12px;
}

td {
  padding: 15px 12px;
  border-bottom: 1px solid #d9d2c4;
  vertical-align: top;
}

.title-heading { width: 44%; }
.status-heading { width: 115px; }
.rate-heading { width: 90px; }

.book-title {
  display: block;
  color: #304e3b;
  font-family: Georgia, serif;
  font-size: 18px;
}

.book-pitch {
  font-size: 13px;
  margin: 8px 0;
}

.book-details {
  color: #665e52;
  font-size: 12px;
  margin: 10px 0 0;
}

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

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

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

span {
  display: inline-block;
}

span[class="status"], span[class^="rate"] {
  height: 30px;
  width: 100px;
  padding: 5px;
}

span[class="status"] {
  text-align: center;
  border-radius: 15px;
  font-size: 12px;
  font-weight: bold;
}

tr[class="read"] span[class="status"] {
  border: 1px solid #7eaa83;
  background-image: linear-gradient(#d0e6cd, #edf8e9);
}

tr[class="in-progress"] span[class="status"] {
  border: 1px solid #81aaa5;
  background-image: linear-gradient(#cce8e2, #edf9f6);
}

tr[class="to-read"] span[class="status"] {
  border: 1px solid #d5ad68;
  background-image: linear-gradient(#f6dfb5, #fff4df);
}


span[class^="rate"] > span {
  border: 1px solid #b49b72;
  border-radius: 50%;
  margin: 3px;
  height: 13px;
  width: 13px;
  background-color: #fffdf8;
}

span[class~="one"] > span:first-child {
  background-image: linear-gradient(#e9c979, #bd8d3f);
}

span[class~="two"] > span:nth-child(-n+2) {
  background-image: linear-gradient(#e9c979, #bd8d3f);
}

span[class~="three"] > span {
  background-image: linear-gradient(#e9c979, #bd8d3f);
}

.note {
  color: #665e52;
  font-size: 13px;
}

.reflection {
  background-color: #fffdf8;
  border: 1px solid #d7cdbb;
  border-radius: 5px;
  padding: 18px 25px;
}

footer {
  text-align: center;
  color: #665e52;
  font-size: 13px;
  margin-top: 30px;
  padding: 10px;
}