a:visited { color: black; }
a:active { color: grey; }
a:link { color: grey; }

.hidden { display: none; }

#content {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  margin: 1em auto;
}
@media (min-width: 600px) {
  #content {
    width: 800px;
  }
}
@media (max-width: 600px) {
  #content {
    font-size: 18px;
    margin: 1em 1em;
  }
}

a.index { float: right; }

h1 {
  font-size: 210%;
  font-weight: bold;
  margin-bottom: 1em;
}
h2 {
  font-size: 140%;
  font-weight: bold;
  margin-bottom: 1em;
}
h3 {
  font-weight: bold;
  margin-bottom: .7em;
}
/*h4 {
  font-size: 110%;
  margin-bottom: .7em;
}*/
em {
  font-style: italic;
}
strong {
  font-weight: bold;
}
p {
  margin-bottom: 1em;
  line-height: 1.25em;
  text-align: justify;
}
p.spacer {
  margin: 0;
  line-height: 0;
}
@media (max-width: 600px) {
  p {
    text-align: inherit;
  }
}

img {
  max-width: 100%;
}
img.brand {
  width: 4.9em;
  height: 4.9em;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  vertical-align: middle;
}
img.post-image {
  /* WARNING: change width/height here and in partials/index-post.html */
  width: 4.9em;
  height: 4.9em;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  vertical-align: middle;
  border: 1px solid darkgrey;
  filter: grayscale(100%);
}
.index-post:hover img.post-image {
  filter: inherit;
  border: 1px solid #dedede;
}

.nav {
  display: flex;
  justify-content: space-between;
  margin-top: 2.1em;
  margin-bottom: 2.8em;
  font-size: 77%;
}

.blog-title, .post-title {
  margin-bottom: 1.4em;
}
.blog-title table, .post-title table {
  border-spacing: 0.35em;
}
.blog-title .title, .post-title .title {
  font-family: 'Uncial Antiqua', cursive;
  font-size: 210%;
  padding-left: 0.7rem;
  padding-top: 0.35em;
}
.blog-title .subtitle, .post-title .subtitle {
  color: #aaaaaa;
  padding-top: 0.35em;
  padding-left: 0.7rem;
}
.blog-title .title a {
  text-decoration: none;
}
@media (max-width: 600px) {
  .blog-title .title, .post-title .title {
    font-size: 120%;
  }
  .blog-title .subtitle, .post-title .subtitle {
    font-size: 90%;
  }
  .blog-title img.brand,.post-title img.brand {
    width: 3.5em;
    height: 3.5em;
    vertical-align: top;
  }
}

#index p.links {
  margin-top: 1.4em;
  margin-bottom: 1.4em;
}
#index h2 a {
  text-decoration: none;
}
#index h2 a:active { color: black; }
#index h2 a:link { color: black; }
#index .tags a { margin-right: 0.11em; }
#index .tags { margin-right: 0.28em; }

.index-post {
  margin-top: 2.1em;
}
.index-post table td.post-image {
  min-width: 6.3em;
}
.index-post table td.text {
  vertical-align: top;
}
.index-post table td.text .content {
  margin-top: 0.56em;
}
.index-post .post-id {
  font-weight: bold;
}
.index-post .post-title {
  font-family: 'Uncial Antiqua', cursive;
  font-weight: lighter;
  font-size: 140%;
  display: block;
  margin-bottom: 0.35em;
}
.index-post .post-title a {
  text-decoration: none;
}
.index-post .post-tags {
  margin-left: 0.42em;
}
  /*
@media (max-width: 600px) {
}
  */

.post h2 {
  margin-top: 1.4em;
}
.post:not(.all-post) h2 {
  font-family: 'Uncial Antiqua', cursive;
  font-weight: lighter;
}
.post .links {
  margin-top: 2em;
  margin-bottom: 3.5em;
}

.all-post h2.title {
  margin-top: 2.1em;
}
.all-post h2.title .tags {
  font-weight: normal;
  font-size: 70%;
  margin-left: .4em;
}
.all-post span.id {
  font-weight: normal;
  font-size: 70%;
  margin-right: .4em;
}
.all-post h2.title .t {
  font-family: 'Uncial Antiqua', cursive;
  font-weight: lighter;
}
@media (max-width: 600px) {
  .all-post h2.title > * {
    display: block;
    margin-left: 0 !important;
  }
  .all-post h2.title > .t {
    margin: 0.35em 0;
  }
  .all-post h2.title > .tags {
    font-size: 60%;
  }
}

body.post div.brand {
  float: left;
  margin-right: 0.42em;
  margin-bottom: 0.35em;
}
body.post div.brand {
  img.brand {
    height: 3.5em;
    width: 3.5em;
  }
}
body.post h2 {
  font-size: 140%;
  padding-top: 0.7em;
  /*
  vertical-align: bottom;
  padding-left: 0.49em;
  */
}

.foot-links {
  margin-top: 2.1em;
  margin-bottom: 2.1em;
}

/* https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/ */
blockquote {
  position: relative;
  /*margin-top: 2.1em;*/
  margin-top: 0;
  padding: 0.5em 0;
  quotes: "\201C""\201D""\2018""\2019";
  line-height: 1.2em;
}
blockquote:before {
  position: absolute;
  top: 21px;
  left: 0px;
  color: #ccc;
  content: open-quote;
  font-size: 4em;
}
blockquote:after {
  content: no-close-quote;
}
blockquote p {
  display: block;
  padding-left: 35px;
}
blockquote .attribution {
  font-style: italic;
  margin-left: -0.7em;
}

code {
  font-family: monospace;
  background: #dfdfdf;
  padding: 0 0.2em;
  -webkit-border-radius: 2%;
  -moz-border-radius: 2%;
  border-radius: 2%;
}

pre {
  font-family: monospace;
  margin-top: 0.9em;
  margin-bottom: 1.4em;
}
pre > code {
  font-family: monospace;
  background-color: lightgrey;
  padding: .3em .7em;
  -webkit-border-radius: 2%;
  -moz-border-radius: 2%;
  border-radius: 2%;
}

pre.listing {
  padding: .3em .7em;
  background-color: #e5e5e5;
  -webkit-border-radius: 2%;
  -moz-border-radius: 2%;
  border-radius: 2%;
}

img.screenshot {
  -webkit-border-radius: 2%;
  -moz-border-radius: 2%;
  border-radius: 2%;
}

#index em {
  font-style: normal;
}
#index strong {
  font-weight: normal;
}
#index code {
  background-color: white;
  font-family: inherit;
}

.all-post h2.title a {
  text-decoration: none;
}
.all-post h2.title a:active { color: black; }
.all-post h2.title a:link { color: black; }

iframe.speakerdeck-iframe {
  margin-bottom: 1.4em !important;
}

ol, ul {
  margin-bottom: 1.4em;
}
li {
  list-style-type: disc;
  list-style-position: outside;
  margin-left: 1.4em;
  margin-bottom: 0.14em;
}
ol > li {
  list-style-type: decimal;
}

figure.left, figure.right {
  margin-bottom: 0.49em;
}
figure.left {
  float: left;
  margin-right: 0.98em;
  max-width: 35%;
}
figure.right {
  float: right;
  margin-left: 1.4em;
  max-width: 35%;
}
figure.left.spaced { margin-right: 1.47em; }
figure.right.spaced { margin-left: 1.47em; }
figure.capright figcaption { text-align: right; }

figure.small { max-width: 28%; }
figure.smaller { max-width: 21%; }
figure.smallerr { max-width: 19%; }
figure.smallest { max-width: 14%; }
figure.large { max-width: 40%; }
figure.larger { max-width: 42%; }
figure.largest { max-width: 49%; }
figure.largestt { max-width: 56%; }
figure.largest7 { max-width: 71%; }
figure.banner {
  width: 100%;
  margin-bottom: 1.4em;
}
figure img {
  border: 1px solid lightgrey;
}
figure.noborder img {
  border: 0;
}
figcaption {
  color: #aaaaaa;
  margin-top: 0.14em;
  margin-bottom: 0.21em;
}
figcaption a { color: #aaaaaa; }
figcaption a:visited { color: #aaaaaa; }
figure.banner figcaption {
  margin-bottom: 0.77em;
  text-align: right;
}
figure.banner img {
  width: 100%;
}
figure.banner.bottom {
  margin-bottom: 3.5rem;
}
figure.banner:not(:first-of-type) {
  margin-top: 2.1rem;
}
figure.banner.spaced {
  margin-top: 2.8rem;
  margin-bottom: 2.1rem;
}

@media (max-width: 600px) {
  figure.left, figure.right {
    width: 100%;
    margin: 0;
    margin-bottom: 0.49em;
  }
  figure.left { margin-right: 0.56em; }
  figure.right { margin-left: 0.56em; }
}

img.brand:hover {
  opacity: 0.7;
}

figure.circle img {
  width: 210px;
  height: 210px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  vertical-align: middle;
  border: 1px solid darkgrey;
}

audio {
  height: 1.4rem;
  width: 35%;
  padding: 0;
  margin: 0;
  margin-bottom: 0.7em;
}
audio::-webkit-media-controls-enclosure {
  border-radius: 0px;
  background-color: lightgrey;
}

hr {
  margin-top: 1.1em;
  margin-bottom: 1.1em;
}

.no-border img { border: 0; }
.half-width { min-width: 50%; }

pre {
  font-size: 77%;
  line-height: 0.7rem;
  background-color: #b0c4de8a;
  padding: 0.7em;
  margin-left: 0.7em;
  white-space: break-spaces;
}
pre.left {
  float: left;
  font-size: 63%;
  padding: 0;
  margin: 0;
  margin-right: 0.70em;
  margin-bottom: 0.28em;
}
pre.right {
  float: right;
  font-size: 70%;
  padding: 0;
  margin: 0;
  margin-left: 0.70em;
  margin-bottom: 0.28em;
}
@media (max-width: 600px) {
  pre.left {
    font-size: 31%;
    float: none;
    margin: 0;
    margin-bottom: 1.4em;
  }
  pre.right {
    font-size: 31%;
    float: none;
    margin: 0;
    margin-bottom: 1.4em;
  }
}

#content table.data {
  margin-left: 0.7em;
  margin-bottom: 1.4em;
}
#content table.data tbody tr:hover {
  background-color: lightgrey;
}
#content table.data th {
  font-weight: bold;
  border: 1px solid lightgrey;
  padding: 0.28em 0.49em;
}
#content table.data td {
  border: 1px solid lightgrey;
  padding: 0.28em 0.49em;
}

.pix { float: right; }


/** comments **/

/* first system
div.comments {
  margin: 3.5em 0;
}
div.comments h3 {
}
div.comments h4 {
  margin-bottom: 0.7em;
}
*/

/* second system */
h3.comments {
  margin-top: 4.2em;
  font-variant: small-caps;
  /*margin-left: 0.7em;*/
}
h3.comments a {
  text-decoration: none;
  color: black;
}
h3.comments ~ p,
h3.comments ~ ul {
  font-size: 94%;
  font-family: inconsolata,monospace;
  /*margin-left: 0.7em;*/
}
h3.comments ~ p:last-of-type {
  margin-bottom: 3.5em;
}
div.comment {
  margin-top: 2.1em;
  margin-bottom: 1.4em;
}
div.comment:before {
  content: '·';
  padding-left: 0.1em;
  padding-right: 0.3em;
}
h3.comments + div.comment {
  margin-top: 1.4em;
}
a.reply {
  margin-left: 1.4em;
}


/*
.links .twitter img {
  position: relative;
  width: 1.1em;
  margin: 0;
  margin-left: 0.7em;
  top: 0.3em;
}
*/
.links .mastodon img {
  position: relative;
  width: 1.1em;
  margin: 0;
  margin-left: 0.7em;
  top: 0.3em;
}

.links .atom img {
  width: 0.94em;
  margin-left: 0.35em;
  margin-right: 0.35em;
  margin: 0 0.35em;
  top: 0.2em;
  position: relative;
}


/** webmentions **/

h3.webmentions {
  margin-top: 4.2em;
  font-size: 110%;
}
h3.webmentions a {
  text-decoration: none;
}
h3.webmentions + ul {
  margin-top: 1.4em;
  margin-bottom: 3.5em;
}


/** footnotes **/

a.footnote {
  margin-left: 0.28em;
  font-size: 84%;
  position: relative;
  top: -0.28em;
  text-decoration: none;
}

ol.footnotes {
  margin-top: 3.5em;
}
ol.footnotes > li {
  list-style-type: none;
  margin-left: 2.1em;
}
ol.footnotes a.number {
  position: relative;
  top: 0.7em;
  left: -2.1em;
  text-decoration: none;
}

span.lang {
  font-size: 77%;
  background-color: lightgrey;
  color: white;
  font-weight: bold;
  padding: 0 0.35em;
  -webkit-border-radius: 14%;
  -moz-border-radius: 14%;
  border-radius: 14%;
}

.h2-uncial {
  font-family: 'Uncial Antiqua', cursive;
  font-size: 130%;
  /*
  line-height: 2.1;
  */
}

p.fleuron {
  text-align: center;
}

/*
.months {
  position: fixed;
  bottom: 0;
  right: 50%;
  margin-right: -460px;
  line-height: 1.05;
  display: none;
}
.months li {
  list-style: none;
}
*/