body {
  background: #ececec;
  padding: 0;
  margin: 0;
  font-size: 16px;
  --body-text-font: Verdana, Geneva, Arial, Helvetica, sans-serif;
  --header-font: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif;
  --header-color: #7f4c00;
  --link-color: #7f4c00;
  --link-hover-color: #ce7b00;
  --accent-color: #a77c33;
  --bg-golden: #dab873;
}
main {
  max-width: 1200px;
  margin: 0 auto;
  background: white;
  display: flex;
  flex-flow: column nowrap;
  font-family: var(--body-text-font);
  color: #333;
}
main a {
  color: var(--link-color);
  text-decoration: none;
}
main a:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
}

main h1, main h2, main h3, main h4, main h5, main h6 {
  color: var(--header-color);
  font-family: var(--header-font);
  font-weight: bold;
}

img {
  max-width: 100%;
}

/* Horizontal rules between posts */
hr {
  border: none;
  height: 3px;
  background-color: var(--accent-color);
  width: 50%;
  margin: 10px auto;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding: 1.5rem 15px;
  font-family: var(--header-font);
}
.pagination a {
  color: var(--link-color);
  text-decoration: none;
  font-weight: 600;
}
.pagination a:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
}
.pagination-info {
  color: #888;
  font-size: 0.9rem;
}

.tag-header {
  max-width: 80ch;
  margin: 0 auto;
  padding: 0 15px;
  width: calc(100% - 30px);
}

/* --- WordPress theme content classes --- */

/* Positioning */
.left {
  float: left;
  clear: left;
  margin-right: 1em;
}
.right {
  float: right;
  clear: right;
  margin-left: 1em;
}
.alignright {
  float: right;
}
.alignleft {
  float: left;
}
.center {
  text-align: center;
  margin: auto;
}
.clear {
  clear: both;
}

/* Box / quote */
.box {
  padding: 10px;
  margin: 15px 0;
  border: solid #333 1px;
  background-color: #e0e0e0;
  font-size: 0.9em;
  overflow: auto;
}
.quote {
  font-style: italic;
  margin: 15px auto;
  width: 80%;
}

/* Bordered images and tables */
.bordered img {
  border: solid 3px var(--accent-color);
}
.vignette {
  padding-top: 15px;
  padding-bottom: 15px;
}
.indentedBox {
  clear: both;
  margin: 15px;
  padding: 10px;
  border: solid 3px var(--accent-color);
}
table.bordered,
table.bordered th,
table.bordered td {
  border: solid 1px var(--accent-color);
  border-spacing: 0;
}

/* Blockquote */
blockquote {
  margin: 15px 30px 0 10px;
  padding-left: 20px;
  border-left: 5px solid #ddd;
}

/* Code */
code, .code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.0em;
  line-height: 1.5em;
  color: #404040;
}

@media (width < 600px) {
  .left, .right {
    float: none;
    margin: 0 auto;
    text-align: center;
  }
}

/* --- Archives page --- */
.archives-content {
  max-width: 80ch;
  margin: 0 auto;
  padding: 15px;
  width: calc(100% - 30px);
  line-height: 1.5;
  color: #333;
}
.archives-content h2 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}
.archives-years > details {
  margin-bottom: 2px;
}
.year-summary {
  cursor: pointer;
  padding: 8px 0;
  font-family: var(--header-font);
  font-size: 1.3em;
  font-weight: bold;
  color: var(--header-color);
}
.year-summary:hover {
  color: var(--link-hover-color);
}
.year-count {
  color: #888;
  font-size: 0.7em;
  font-weight: normal;
}
.archives-months {
  padding-left: 1.5em;
}
.archives-months details {
  margin-bottom: 2px;
}
.archives-months summary {
  cursor: pointer;
  padding: 4px 0;
  font-family: var(--header-font);
}
.archives-months summary:hover {
  color: var(--link-hover-color);
}
.archives-months .month-count {
  color: #888;
  font-size: 0.85em;
}
.archives-months ul {
  list-style: none;
  padding-left: 1.5em;
  margin: 0 0 0.5em 0;
}
.archives-months li {
  padding: 3px 0;
}
.archives-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  line-height: 2;
}
.archives-tags .tag-item {
  white-space: nowrap;
}
.archives-tags .tag-count {
  color: #888;
  font-size: 0.8em;
}

/* --- 404 page --- */
.not-found {
  max-width: 80ch;
  margin: 0 auto;
  padding: 2em 15px;
  text-align: center;
  width: calc(100% - 30px);
}
.not-found h2 {
  font-size: 5em;
  margin: 0;
  color: var(--accent-color);
}
.not-found .not-found-title {
  font-family: var(--header-font);
  font-size: 1.5em;
  color: var(--header-color);
  margin-bottom: 1em;
}
.not-found ul {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 2em;
  margin-top: 1em;
}

/* --- Blogroll page --- */
.blogroll-content {
  max-width: 80ch;
  margin: 0 auto;
  padding: 15px;
  width: calc(100% - 30px);
  line-height: 1.5;
  color: #333;
}
.blogroll-content h2 {
  margin-top: 1em;
  margin-bottom: 0.5em;
}
.blogroll-content h3 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}
.blogroll-intro {
  font-style: italic;
  color: #666;
}
.blogroll-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.blogroll-list .blogroll-item {
  padding: 4px 0;
}
.blogroll-list .blogroll-desc {
  color: #888;
  font-size: 0.85em;
}
.blogroll-list .blogroll-desc::before {
  content: " — ";
}
/* Sprite blogroll links */
.blogroll-sprite {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}
.blogroll-sprite .sprite-link {
  display: block;
  width: 180px;
  height: 60px;
}
.blogroll-sprite .sprite-img {
  display: block;
  width: 180px;
  height: 60px;
  background-image: url(/blog/img/bd-links/sprite.png);
  background-repeat: no-repeat;
}