@import url('https://fonts.googleapis.com/css2?family=Old+Standard+TT:ital,wght@0,400;0,700;1,400&display=swap');

html {
  /* Interesting font options included Crimson Text, Vollkorn, Roboto Slab. */
  font-family: 'Old Standard TT', Helvetica Neue, Arial, sans-serif;
  color: #616566;
  background-color: #e6ebea;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAwIiBoZWlnaHQ9IjEwMDAiPjxmaWx0ZXIgaWQ9ImEiPjxmZVR1cmJ1bGVuY2UgYmFzZUZyZXF1ZW5jeT0iLjIiIG51bU9jdGF2ZXM9IjEiIHN0aXRjaFRpbGVzPSJzdGl0Y2giLz48ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjEgMCAwIDAgMCAxIDAgMCAwIDAgMSAwIDAgMCAwIDAgMCAwIDAgMC4wNyIvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbHRlcj0idXJsKCNhKSIvPjwvc3ZnPg==);
  background-attachment:fixed;
}

a {
  color: #f55b2c;
  text-decoration: none;
}
a:hover {
  color: #616566;
  background-color: #fff7a5;
}

body {
  max-width: 70ch;
  margin: 1rem auto;
  padding: 0 8px;
}

/* Index page. */

.index > hgroup {
  display: flex;
  align-items: center;
  justify-content: center;
}

.index .rss {
  position: relative;
  top: .2rem;
  left: -2.5rem;
  width: 0;  /* Ensures the title is centered. */
}

.index .rss > img { height: 1rem; }

.index nav > ul { list-style: none; }

.index nav > ul > li {
  list-style-type: '–\00A0\00A0\00A0\00A0\00A0';
}

.index nav > ul > li {
  margin-bottom: .4rem;
}

/* Post tags in index */
.index nav > ul > li > .post-tags {
  visibility: hidden;
  font-style: italic;
  font-size: 0.7rem;
  float: right;
}

.index nav > ul > li:hover > .post-tags {
  visibility: visible;
}


/* Article page */

/* Used on articles top links. */
main > nav.social-links {
  text-align: center;
  filter: saturate(70%) contrast(65%) brightness(123%);
  height: 20px;
}

main > nav.social-links > object {
  height: 20px;
}

main {
  background: #fff;
  box-shadow: 0 0 0 4px rgba(0,0,0,0.03) inset,0 0 0 1px rgba(0,0,0,0.15);
  padding: 2rem;
}

article blockquote {
  margin: 0;
  padding-left: 1.4rem;
  position: relative;
}
article blockquote::before {
  content: '';
  position: absolute;
  left: 0;
  width: 4px;
  height: 100%;
  background: #dadada;
  border-radius: 2px / 4px;
}
article pre, article code { font-family: monospace; }
article pre {
  padding: 10px;
  background-color: #eee;
  border-radius: 3px;
  overflow: auto;
}
article hr {
  border: 0;
  margin: 2rem auto;
  text-align: center;
}
article hr::before {
  content: '⁂';
  color: gray;
  font-size: 1.5rem;
}
article a { color: #f55b2c; }
article a:hover {
  color: #616566;
  background-color: #fff7a5;
}
article ul li {
  list-style: none;
}
article ul li:before {
  content: "\25CF";
  font-weight: 400;
  padding-right: 10px;
  margin-left: -18px;
}
article li:before {
  color: #f55b2c;
  margin: 0.4em 0;
}
article h1 {
  text-align: center;
  margin: 2rem 0 2rem;
}
article h1, article h2, article h3, article h4,
article h5, article h6 { color: black; }
article p { text-align: justify; }
article p > img {
  max-height: 90vh;
  max-width: 17cm;
}
article p > img:only-child,
article p > a:only-child > img,
article figure > img {
  display: block;
  margin: auto;
  margin-left: 50%;
  transform: translateX(-50%);
  border: 1px solid #dadada;
  padding: 5px;
  max-width: calc(70ch - 22px);
}
article figure > figcaption {
  font-style: italic;
}
@media (max-width: 17cm) {
  article p > img {
    /* 16px for the markdown padding. */
    max-width: calc(100vw - 16px);
  }
  article p > img:only-child,
  article p > a:only-child > img,
  article figure > img {
    max-width: calc(100vw - 12px - 16px);
  }
}
article footer {
  font-style: italic;
  font-size: small;
  margin-top: 3rem;
  text-align: right;
}
article table {
  table-layout: fixed;
  margin: auto;
  border-collapse: collapse;
  text-align: center;
  width: 100%;
}
article table th {
  border-bottom: 1px solid black;
  padding: 0 1em;
}
article table tr:nth-child(2n) {
  background-color: #fafaff;
}

/* LaTeXMarkdown */

h1 .autolink-clicker,
h2 .autolink-clicker,
h3 .autolink-clicker,
h4 .autolink-clicker,
h5 .autolink-clicker,
h6 .autolink-clicker {
  visibility: hidden;
}
h1:hover .autolink-clicker,
h2:hover .autolink-clicker,
h3:hover .autolink-clicker,
h4:hover .autolink-clicker,
h5:hover .autolink-clicker,
h6:hover .autolink-clicker {
  visibility: visible;
}