/* Homework 4 - styles.css
   Author: Jordan Wlash
*/
/* Page setup */
body {
  font-family: Arial, Helvetica, sans-serif; /* set font */
  margin: 0; /* remove default space */
  padding: 1rem; /* add space inside edges */
  line-height: 1.4; /* space between lines */
  background: #faf8f5; /* page color */
  color: #222; /* text color */
  font-size: 14px; /* default text size */
}

/* Title */
h1 {
  text-align: center; /* center text */
  font-weight: bold; 
  font-size: 2.2rem; 
  margin-bottom: 0.5rem; 
}

/* Subheading under image */
.subheading {
  text-align: center;
  font-size: 1.8rem; 
  font-weight: bold;
  margin: 1rem 0; 
}

/* Intro */
.intro-paragraph {
  line-height: 1.6;
  font-size: 0.95rem; 
  text-align: left; 
  margin: 0 auto 1rem auto; 
  max-width: 900px; 
}

/* Bold part of paragraph */
.intro-paragraph .highlight {
  font-weight: bold;
}

/* Table container */
.table-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1rem;
  text-align: center; 
}

/* Table look */
table {
  width: 100%; 
  border-collapse: collapse; 
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  background: #fff; 
  border: 3px solid #6b4f3b; 
  margin: 0 auto; 
  font-size: 0.9rem; 
}

/* Table title */
caption {
  caption-side: top;
  text-align: center; 
  font-weight: bold;
  font-size: 1.5rem; 
  padding: 0.8rem 0; 
  color: #000000;
}

/* Table header */
thead th {
  background: #6b4f3b; 
  color: #fff; 
  padding: 0.5rem; 
  text-align: left; 
  font-size: 0.95rem;
}

/* Center the  header */
thead th:nth-child(2) {
  text-align: center;
}


tbody td {
  padding: 0.5rem; 
  border-bottom: 1px solid #e6e0d8; 
  text-align: left; 
}

/* row colors */
tbody tr:nth-of-type(odd) td { background-color: #ffffff; }
tbody tr:nth-of-type(even) td { background-color: #f0f0f0; }


tbody tr:hover td { background-color: #e0e0e0; }

/* Image fit page */
.responsive {
  display: block; 
  max-width: 100%; 
  height: auto; 
  margin: 0 auto 1rem auto; 
  border-radius: 6px; 
}

/* Price column */
.price { white-space: nowrap; }

/* Specialty column */
.specialty { white-space: nowrap; font-weight: normal; }

/* Table footer */
tfoot td {
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  font-size: 0.85rem; 
}

/* Footer */
footer p {
  text-align: center; 
  color: #666; 
  margin-top: 1.5rem; 
  font-size: 0.85rem; 
}

/* Validator link */
#validation {
  font-size: 0.85rem; 
  text-decoration: none; 
}


@media only screen and (max-width: 550px) {
  .responsive { max-width: 100%; }
  thead th { font-size: 0.85rem; }
  table { font-size: 0.8rem; }
}