html {
  max-width:80ch;
  margin:auto;
  font-family: "Open Sans", helvetica, sans-serif;
  background: #edeae7;
  color: #1e0010;
}

header, footer, h1, h2, h3 {
  font-family: Consolas, monospace;
}

article {
  padding-bottom: 1em;
}

article p, li {
  font-size: 18px;
  line-height: 26px;
}

li {
  padding-bottom: 0.3em;
}

section {
  padding-top: 0.5em;
}

.post-title .post-date {
  font-size: 0.5em;
}

p.post-notice{
  font-weight: bold;
  color: deeppink;
}

.aside {
  color: #1e0010;
  font-weight: normal;
  padding-left: 2em;
  padding-right: 2em;
}

.aside::before {
  font-weight: bold;
  color: darkmagenta;
  content: "\1F331 Short aside: ";
}

img {
  max-width:100%;
  height:auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 2em;
}

div.bottom-of-post {
  padding-bottom: 1em;
}

/** Navigation block **/

nav {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, 8em);
}

nav  i {
  width: 1em;
}

/** Article header block **/

article header {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

article header h1 {
  margin-right: 2em;
  font-size: 2em;
  max-width: 26ch;
}

.article h2, h3 {
  margin-top: 2em;
}

article header time {
  margin: auto 0 auto 0;
  max-width: 10em;
}

/** Link styling **/
a:link {
  color: black;
}

a:visited {
  color: grey;
}

.post a {
  text-decoration: none;
}

.post a:hover {
  color: deeppink;
}

a.header-link {
  color: lightgrey;
  padding-left: 0.25em;
}

.post a:hover i {
  color: mediumpurple;
}

header a {
  text-decoration: none;
}

header a:visited {
  color: black;
}

/** Icon colouring & styling **/

i {
  width: 1.4em;
}

.unpublished h2.post-title i {
  color: grey;
}

h2.post-title i {
  color: darkorchid;
  max-width: 25px;
}

.specific-summary h2 i {
  color: darkgreen;
}

.specific-summary h3 i {
  color: darkorchid;
}

i.fab.fa-python {
  /** the python icon looks silly with a normal font weight **/
  font-weight: 100;
}

/** Post links **/
section.post {
  padding: 0;
  min-width: 20em;
  max-width: 20em;
}

main.home .posts {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/** pagination styling  **/
.pagination .older {
  float: right
}

/** quote styling **/
blockquote {
  font-style: italic;
  font-family: open ui-serif;
}

/** Tweet styling  **/
blockquote.twitter-tweet {
  background: lavender;
  color: darkblue;
  padding: 0.5em 2em 1em 2em;
}

div.twitter-tweet{
    margin-left: auto;
    margin-right: auto;
}

/** Code styling  **/
pre.highlight {
  overflow: auto;
  margin: 0;
  line-height: 20px;
  font-size: 15px;
}
code { font-family: 'Fira Code', Consolas, monospace; }

@supports (font-variation-settings: normal) {
  code { font-family: 'Fira Code VF', Consolas,  monospace; }
}

code.language-plaintext {
  color: darkmagenta;
  font-family: "Open Sans", helvetica, sans-serif;
}

div.highlight {
  color: lightblue;
  background: darkslategrey;
  padding: 0.5em 1em 0.5em 1em;
}

/** bottom of post comment link styling **/

.comment-section {
  padding: 0 0 2em 0;
}

.comment-section a:link {
  color: deeppink;
  display: block;
}

.comment-section a:visited {
  color: deeppink;
}

.mastodon-comment {
  border: 1px solid grey;
  padding: 0 1em 0 1em;
}

.mastodon-comment .comment-author img {
  float: left;
  width: 2em;
  padding-right: 0.5em;
}

.mastodon-comment a.comment-author {
  display: inline-block;
  width: 9em;
  padding-right: 1em;
}

.mastodon-comment .comment-content {
  display: inline-block;
}

/** footer styling **/

footer {
  font-size: 0.8em;
  color: grey;
  opacity: 90%;
  margin-top: 3em;
}

footer a:link {
  color: firebrick;
}
footer a:visited {
  color: firebrick;
}

footer .page-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

footer .page-links a{
  margin-right: 2em;
}