body {
  max-width: 800px;
  margin: auto;
  padding: 0.5em;
  line-height: 1.5;
  font-size: 0.92em;
  counter-reset: figure-counter toc-h2;
}

/* avatar image */
.avatar {
  border-radius: 50%;
  max-width: 15%;
  min-width: 40px;
  float: right;
}

/* TOC heading numbering */
nav#TableOfContents > ul {
  counter-reset: toc-h2;
}

nav#TableOfContents > ul > li {
  counter-increment: toc-h2;
  counter-reset: toc-h3;
}

nav#TableOfContents > ul > li::before {
  content: counter(toc-h2) ". ";
}

nav#TableOfContents > ul > li > ul > li {
  counter-increment: toc-h3;
}

nav#TableOfContents > ul > li > ul > li::before {
  content: counter(toc-h2) "." counter(toc-h3) " ";
}

/* Content heading numbering */
main {
  counter-reset: h2-counter;
}

main h2 {
  counter-increment: h2-counter;
  counter-reset: h3-counter;
}

main h2::before {
  content: counter(h2-counter) ". ";
}

main h3 {
  counter-increment: h3-counter;
}

main h3::before {
  content: counter(h2-counter) "." counter(h3-counter) " ";
}

.terms {
  font-size: 1.15em;
}

.diploma {
  color: rgb(4, 108, 72);
  background: #e3ece9;
  border-radius: 3px;
  display: inline-block;
}

.rank {
  color: rgb(231, 85, 85);
  background: #efeeee;
  border-radius: 3px;
  display: inline-block;
}

a {
  text-decoration: none;
}

/* header and footer areas */
.menu {
  padding: 0;
}

.menu li {
  display: inline-block;
}

.menu a {
  background: #dbecee;
  padding: 5px;
  border-radius: 5px;
}

.article-meta {
  text-decoration: none;
  background: #ffffff;
  padding: 5px;
  border-radius: 5px;
  font-size: 0.9em;
}

.menu,
.article-meta,
footer {
  text-align: center;
}

.title {
  font-size: 0.9em;
}

hr {
  border-style: dashed;
  color: #c4c2c2;
}

/* code */
pre {
  border: 1px solid #f0efef;
  box-shadow: 5px 5px 5px #eee;
  border-radius: 5px;
  padding: 1em;
  overflow-x: auto;
}

code {
  background: #f9f9f9;
}

pre code {
  background: none;
}

/* misc elements */
img,
iframe,
video {
  max-width: 100%;
}

main {
  hyphens: auto;
}

blockquote {
  background: #f9f9f9;
  border-left: 5px solid #ccc;
  padding: 3px 1em 3px;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* table */
table {
  margin: auto;
  border-top: 1px solid #666;
  border-bottom: 1px solid #666;
}

table thead th {
  border-bottom: 1px solid #ddd;
}

th,
td {
  padding: 5px;
}

thead,
tfoot,
tr:nth-child(even) {
  background: #eee;
}

/* floating images - allow text wrapping for images < 70% width */
.image-float {
  display: inline-block;
  counter-increment: figure-counter;
}

.image-float img {
  border-radius: 4px;
}

.image-float figcaption::before {
  content: "Fig. " counter(figure-counter) ". ";
  font-weight: bold;
}

/* centered images for width >= 70% */
.image-container {
  text-align: center;
  margin: 1em auto;
  clear: both;
  counter-increment: figure-counter;
}

.image-container img {
  border-radius: 4px;
}

.image-container figcaption::before {
  content: "Fig. " counter(figure-counter) ". ";
  font-weight: bold;
}

/* common figcaption styling */
figcaption {
  text-align: center;
  font-style: italic;
  color: #666;
  margin-top: 5px;
  font-size: 0.9em;
}