@font-face {
  font-family: "zilla-slab";
  src: url("../fonts/ZillaSlab-Light.woff") format("woff");
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: "zilla-slab";
  src: url("../fonts/ZillaSlab-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "charter_regular";
  src: url("../fonts/Charter-Regular.woof") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "mononoki_regular";
  src: url("../fonts/mononoki-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "copperhewitt_book";
  src: url("../fonts/CooperHewitt-Book.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "firago_regular";
  src: url("../fonts/FiraGO-Regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "firago_light";
  src: url("../fonts/FiraGO-Light.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "firago_medium";
  src: url("../fonts/FiraGO-Medium.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--body-font);
  font-size: var(--body-font-size);
  color: var(--body-text-color-fg);
}

a {
  text-decoration-color: var(--link-line-color);
  text-decoration-thickness: var(--link-line-thickness);
  text-underline-offset: 2.5px;
  color: var(--body-text-color-fg);
}

h1 a {
  text-decoration: none;
}

video {
  max-width: 100%;
  text-align: center;
}

.link {
  text-decoration-color: var(--link-line-color);
  text-decoration-thickness: var(--link-line-thickness);
  text-underline-offset: 2.5px;
  text-decoration: underline !important;
}

.link-with-image {
  border: none !important;
}

nav.site-navigation {
  display: flex;
  background-color: var(--primary-color-bg);
  color: var(--primary-color-fg);
  align-items: center;
  vertical-align: middle;
  align-content: space-between;
}

nav.site-navigation a {
  font-style: normal;
  align-items: center;
  vertical-align: middle;
  align-content: space-between;
}

.site-menu {
  display: flex;
}

@media (max-width: 1000px) {
  .site-menu {
    display: flex;
    flex-direction: column;
    padding-bottom: 20px;
  }

  nav.site-navigation {
    height: unset;
    flex-direction: column;
  }

  span.nav-item {
    flex: 1 1 auto;
    display: flex;
    align-content: center;
    align-items: center;
    border: solid 1px;
  }
}

.site-brand {
  flex: 1 1 auto;
  color: var(--primary-color-fg);
  font-size: 1.6rem;
  font-family: "copperhewitt_book";
  text-decoration: none;
  padding: 10px;
}

.nav-item {
  font-family: "firago_light";
  color: var(--primary-color-fg);
  padding: 10px;
  font-size: 1.2rem;
  text-decoration: none;
}

span.nav-item {
  flex: 1 1 auto;
}

#content {
  padding: 50px;
  width: var(--content-max-size);
  margin: 0 auto;
  line-height: var(--article-line-height);
  text-rendering: optimizeLegibility;
}

footer a {
  text-decoration: none;
}

h3 a {
  text-decoration: none;
}

#content p a > img {
  border: unset;
}

#content p {
  font-size: var(--article-text-size);
  line-height: var(--article-line-height);
  font-weight: 200;
  margin: unset;
  margin-bottom: 1rem;
}

.e-content p:first-child::first-letter {
  font-size: 130%;
}

#content h1 {
  font-size: calc(var(--article-text-size) * 1.4);
}

#content h2 a {
  color: #333;
  font-size: calc(var(--article-text-size) * 1.2);
  font-style: normal;
}

#content h2 {
  color: #333;
  font-size: calc(var(--article-text-size) * 1.2);
  font-style: normal;
}

div.figure img {
  max-width: 100%;
}

div.figure {
  margin: 0 auto;
  text-align: center;
  max-width: 100%;
}

div.figure p.caption {
  font-size: 0.8rem !important;
  font-style: italic;
  text-align: center;
}

blockquote:not([class]) {
  margin-left: 2em;
  border-left: solid 6px;
  padding-left: 0.5em;
}

article.inline::after {
  text-align: center;
  content: "\2756";
  width: 100%;
  display: block;
  font-size: 2rem;
}

article p,
ul,
li {
  font-size: var(--article-text-size);
  font-weight: 200;
}

header h1 {
  font-size: var(--article-title-size);
}

h3.title a {
  font-style: normal;
  margin-bottom: 3px;
  margin-top: 10px;
  font-size: 1.6rem;
}

h3 {
  font-size: 1.4em;
}

h3,
h2,
h1,
h4 {
  font-family: "zilla-slab";
}

div.date-and-tags {
  color: #888;
}

.tags a {
  color: var(--link-line-color);
  text-decoration: none;
}

.tags a::before {
  content: "#";
  color: var(--link-line-color);
}

.tag {
  color: var(--link-line-color);
  text-decoration: none;
  padding-left: 2px;
  padding-right: 2px;
}

.tag::before {
  content: "#";
  color: var(--link-line-color);
}

p img {
  margin: 0 auto;
  text-align: center;
  max-width: 100%;
}

footer#site-footer {
  background-color: #3c3c3c;
  color: #fff;
  padding: 25px;
  font-family: "firago_light";
  text-align: center;
}

footer#site-footer h2 {
  font-size: 1.2rem;
}

footer#site-footer a {
  color: #fff;
}

ul.pagination {
  display: flex;
  background-color: var(--body-text-color-bg);
  color: var(--body-text-color-fg);
  list-style: none;
  align-content: space-between;
  justify-content: center;
}

ul.pagination li {
  padding: 10px;
  background-color: var(--body-text-color-bg);
  color: var(--primary-color-bg);
}

ul.pagination li:hover {
  padding: 10px;
  background-color: var(--primary-color-bg);
  color: var(--primary-color-fg);
}

hr {
  border: 0;
  height: 1px;
  background: #333;
}

.embed-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hidden {
  display: none;
}

/* Web Mentions CSS stolen from Kevin Marks (with modifications) */

.webmention-wrapper {
  max-width: 50em;
  margin: auto;
}

.webmention-published::before {
  content: "🌐 ";
}

.webmention-published {
  color: var(--link-line-color);
}

.webmention-published {
  text-decoration: none;
}

.webmention-container,
.webmention-summary {
  max-width: 50em;
}
.webmention-name {
  font-family: "zilla-slab", serif;
}

.webmention-author img {
  height: 3em;
  float: left;
  margin: 0.25em;
}
.webmention-author {
  font-weight: bold;
}

.webmention-author a {
  text-decoration: none;
}

.webmention-mention {
  margin: 0.5em;
  padding-bottom: 10px;
}
.webmention-facepile > li {
  display: inline-block;
  position: relative;
  margin: 0 5px 5px 0;
}
.webmention-interaction-presentation:after {
  display: block;
  position: absolute;
  bottom: -4px;
  right: -4px;
  padding: 4px;
  width: 1em;
  height: 1em;

  font-size: 1em;
  line-height: 1;
  text-align: center;

  color: #000;
}
.webmention-interaction-like .webmention-interaction-presentation:after {
  content: "🌟";
  color: gold;
}
.webmention-interaction-repost .webmention-interaction-presentation:after {
  content: "♻";
  color: green;
}

.webmention-interaction-presentation > span {
  display: block;
  text-indent: -5000em;
  position: relative;
  overflow: hidden;
  width: 3em;
  height: 3em;
  background: #eee;
  border: 1px solid #ccc;
}
.webmention-interaction-presentation > span > img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
.webmention-facepile :link,
.webmention-facepile :visited {
  text-decoration: none;
}

img {
  max-width: 100%;
}

code {
  white-space: pre;
  hyphens: none;
}

.paren-0 {
  color: #ef2929;
}
.paren-1 {
  color: #ffaf5f;
}
.paren-2 {
  color: #fce94f;
}
.paren-3 {
  color: #afff00;
}
.paren-4 {
  color: #87ffff;
}
.paren-5 {
  color: #5fafd7;
}
.paren-6 {
  color: #d18aff;
}
.paren-7 {
  color: #ff7bbb;
}

.paren-8 {
  color: #dd0000;
}
.paren-9 {
  color: #ff8700;
}
.paren-10 {
  color: #ffd700;
}
.paren-11 {
  color: #a1db00;
}
.paren-12 {
  color: #87d7af;
}
.paren-13 {
  color: #1f5bff;
}
.paren-14 {
  color: #af5fff;
}
.paren-15 {
  color: #ff4ea3;
}

.paren-16 {
  color: #a40000;
}
.paren-17 {
  color: #ff5d17;
}
.paren-18 {
  color: #c4a000;
}
.paren-19 {
  color: #5faf00;
}
.paren-20 {
  color: #00d7af;
}
.paren-21 {
  color: #005f87;
}
.paren-22 {
  color: #9a08ff;
}
.paren-23 {
  color: #ff1f8b;
}

figure {
  margin: auto;
  text-align: center;
}

.progress-bar-wrapper {
  width: 90%;
  max-width: 300px;
}

.progress-bar-background {
  width: 100%;
  background-color: #e0e0e0;
  padding: 3px;
  border-radius: 3px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
}

.progress-bar-fill {
  display: block;
  height: 22px;
  background-color: var(--primary-color-bg);
  border-radius: 3px;
  
  transition: width 500ms ease-in-out;
}

#support-me-box {
  margin: 10px;
  padding:  10px;
  max-width: 728px;
  border: solid #3c3c3c 1px;
  background-color: #d3d3d357;
}

#support-me-box h1 {
  font-size: calc(var(--article-text-size) * 0.8);
}

#support-me-box p {
  font-size: calc(var(--article-text-size) * 0.7);
}


div.damage-chart {
  margin:  auto;
  padding:  40px;
}

table.damage-chart {
  border:  solid 1px black;
  border-collapse: collapse;
}

table.damage-chart th, table.damage-chart td  {
  border:  solid 1px black;
  min-width: 25px;
  text-align: center;
  padding:  5px;
}