body {
  font-family: 'Quattrocento Sans', sans-serif;
  padding: 0px;
  margin: 0px;
}

header {
  padding: 8px;
}

@media screen and (min-width: 850px) {
  header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
  }
}

#site-logo {
  margin: 8px 0px 8px 0px;
  display: block;
}

#site-title {
  margin: 8px 0px 8px 0px;
}

#site-slogan {
  font-style: italic;
}

ul#main-menu {
  padding: 0px;
  margin: 8px;
}

ul#main-menu li {
  display: inline-block;
  padding: 2px 8px 2px 8px;
}

ul#main-menu li:not(:last-child) {
  border-right: 1px solid #bbb;
}

main {
  padding: 8px;
}

a {
  color: #62842f;
}

a:visited {
  color: #7f6635;
}

.article-footer {
  display: flex;
  justify-content: flex-end;
}

.article-date {
  color: #666;
  font-size: 80%;
}

.nav-breadcrumbs {
  margin: 12px 0px 12px 16px;
  color: #666;
  font-size: 80%;
}

.nav-breadcrumbs ul {
  margin: 0px;
  padding: 0px;
  display: flex;
  list-style: none;
}

.nav-breadcrumbs li:not(:last-child)::after {
  margin: 0px 8px;
  content: ">";
}

@media screen and (min-width: 800px) {

  #articles-wrapper {
    display: inline-grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 8px;
    align-items: start;
  }

}

.article-preview {
  background-color: #f8f8f8;
  border: 1px solid #bbb;
  border-radius: 5px;
  margin: 8px;
  padding: 8px;
}

.article-preview-metadata {
  text-align: right;
  margin: 8px 4px;
}

.article-preview-footer {
  text-align: right;
}

.error {
  color: red;
  border: 1px solid red;
  border-radius: 4px;
  padding: 8px;
  background-color: #fee;
}

@media screen and (min-width: 1250px) {
  #latest-articles-and-search-block {
    display: grid;
    grid-template-columns: 800px 400px;
    grid-gap: 16px
  }
}

#search-block {
  padding: 12px;
  background-color: #f6f6f6;
  border: 1px solid #ddd;
}

.icon-button {
  background: none;
  border: 0px;
}

.search-box-form {
  background-color: #fdfdfd;
  margin: 2px;
  padding: 8px;
  border: 1px solid #ccc;
  width: fit-content;
}

.search-box-form input {
  border-width: 0px;
}

@media screen and (min-width: 800px) {

  #reviews-block {
    display: grid;
    grid-template-columns: 360px 360px 360px;
    grid-gap: 16px;
  }

}

.review {
  margin: 8px;
  background-color: #fafafa;
  padding: 8px;
  border: 1px solid #ccc;
}

.review-stars {
  color: #b69c57;
}

.review-unrated {
  color: #888;
  font-size: 80%;
}

.review-quote {
  display: block;
  margin: 20px 4px;
  font-style: italic;
}

.review-footer {
  font-size: 80%;
  color: #555;
  text-align: right;
}

#comments-section {
  margin-top: 16px;
  margin-bottom: 64px;
}

.comment {
  border: 1px solid #bbb;
  margin: 24px 0px;
}

.comment-header {
  background: #eee;
  border-bottom: 1px solid #ccc;
  padding: 4px;
  display: flex;
  justify-content: space-between;
}

.comment-author {
  font-style: bold;
}

.comment-timestamp {
  font-size: 80%;
  color: #666;
}

.comment-body {
  padding: 8px;
}

#comment-form {
  width: auto;
  margin: 12px 4px;
}

.comment-form-row {
  margin: 8px 0px;
}

#comment-form .hidden-row {
  display: none;
}

.right-align {
  text-align: right;
}

.comment-box {
  width: 100%;
  min-height: 80px;
}

#comment-form button {
  border: 1px solid #777;
  padding: 6px 16px;
  min-width: 80px;
}

#comment-form button[type="submit"] {
  background-color: #777;
  color: white;
}

#comment-form button[type="reset"] {
  background-color: #f8f8f8;
  color: #666;
}