body {margin: 0;background: #fafafa;}
.header div, .container, .copyright {max-width: 900px;margin: auto; padding: 0;}
.page .header div, .page .container, .page .copyright, .page .menu { max-width: 900px; }
.container { hyphens: auto; }
main { margin-bottom: 15px;  overflow-x: scroll; padding-bottom:5px;}
/* header and footer areas */
.header {border-bottom: 3px double #666;text-align: center;padding: 15px 0 0px;}
.header, article { background: #fff; }
.banner { font-size: 2em; padding-bottom: 10px;}
.banner .text {display: block;line-height: 1em;padding-bottom: 10px;}
.list {margin-top: 15px}
.list .article-meta a, .banner a { color: #000;text-decoration: none;  }
.list .article-meta a:hover { text-decoration: underline; }
.list .article-meta p {margin:0 ;color: #666}
.list .article-meta p a {color: #666}
article { padding: 1em; }
.article-meta {text-decoration: none;background: #eee;padding: 5px;}
.list .article-meta {background: none;border-bottom: 2px dotted #ccc}
.list .article-meta h1 {font-size:1.8em; margin:20px 0 10px 0}
.menu, .article-meta, footer, .post-nav { text-align: center; }
.article-footer { text-align: left; }
.title { font-size: 1.2em; }
.article-list h1, .title { line-height: 1.2em; }
.article-list a, .header a, footer a, .categories a, .active a, .comments a { text-decoration: none; }
.pagination { text-align: center; }
.pagination li, .terms li { display: inline; }
.pagination a { padding: 0 .2em; }

.footer{ margin-top:1em }
.copyright, .copyright a { color: #ccc; }

.menu {margin: 1em auto 0.5em;max-width: 900px;padding:0}
.menu li {display: inline-block;font-weight: bolder;}
.menu a { padding: 0 1em; }
.menu a:hover {text-decoration: underline;}

/* code */
hr {
  border-style: dashed;
  color: #ddd;
}
pre {
  border: 1px solid #ddd;
  box-shadow: 5px 5px 5px #eee;
  overflow-x: auto;
}
code { background: #f9f9f9; }
pre code {
  background: none;
  padding: .5em;
  display: block;
}

/* misc elements */
img, iframe, video { max-width: 100%; }
blockquote {
  background: #f9f9f9;
  border-left: 5px solid #ccc;
  padding: 3px 1em 3px;
}

table {
  margin: 1em auto auto;
  border-top: 1px solid #666;
  border-bottom: 1px solid #666;
}
table thead th { border-bottom: 1px solid #ddd; }
th, td { padding: 5px; }
tr:nth-child(even) { background: #eee }

.thumbnail {
  height: 5.1em;
  width: 6.8em;
  float: left;
  overflow: hidden;
  margin: 5px 8px 5px 0;
  box-shadow: 0 0 8px #666;
}
.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#TableOfContents, #TOC, .comments {
  border: 1px solid #eee;
  border-radius: 5px;
}
.comments a {
  display: inline-block;
  width: 100%;
  text-align: center;
  font-size: 1.2em;
}
.terms { padding-left: 0; }
.post-nav {
  margin: .5em 0;
  display: flex;
  justify-content: space-between;
}
.footnotes { font-size: .9em; }
.footnotes hr {
  width: 50%;
  margin-left: 0;
}