/* Thanks to: https://github.com/lucagez/medium.css */

@import url('https://fonts.googleapis.com/css?family=Lato:400,700|Lora|Playfair+Display:700i,900');

html, body {
  margin: 0;
  width: 100%;
}

h1, h2, p, figcaption, a, li, dt, dd {
  color: rgba(0, 0, 0, 0.84);
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: "Lato", sans-serif;
  text-align: left;
}

h1 {
  font-size: 2.7em;
  margin: 0.6em 0 0.28em;
  font-weight: normal;
}

h2 {
  font-size: 1.9em;
  font-weight: 700;
  padding: 0;
  margin: 1.25em 0 2em;
  line-height: 1.2em;
  letter-spacing: 0;
}

article > h2 {
  margin: 1.25em 0 0.28em;
}

h3 {
  font-size: 1.4em;
  line-height: 1.4em;
  line-height: 1.4em;
}

time, .comments-link {
  font-family: "Lato", sans-serif;
  font-size: 0.8em;
  color: rgba(117, 117, 117, 1);
}

time {
  padding-right: 1.5em;
}

.comments-link {
  cursor: pointer;
  text-decoration: none;
}

p, figcaption, li, dt, dd, table {
  margin-top: 1em;
  font-family: "Lora", serif;
  font-size: 1.3em;
  letter-spacing: -0.03px;
  line-height: 1.58em;
}

p, figcaption, li, dt, dd {
  word-break: break-word;
}

li li, li p, td p, td li {
  font-size: 1em;
}

.byline {
  margin-bottom: 2em;
}

a, summary, h1 > a.portfolio-title-link {
  text-decoration: underline;
}

h1 > a {
  text-decoration: none;
}

a:hover, .summary-inner:hover, h1 > a.portfolio-title-link:hover {
  background: rgba(0, 102, 0, .1);
}

main h1 > a:hover {
  background: none;
}

/* Thanks to: https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/ */

blockquote {
  font-family: "Playfair Display", serif;
  font-size: 1.7em;
  font-style: italic;
  letter-spacing: -0.36px;
  overflow-wrap: break-word;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: -20px;
  color: rgba(0, 0, 0, 0.68);
  padding-left: 23px;
  position: relative;
}

blockquote:before {
  color: rgba(205, 255, 205, 0.68);
  content: '“';
  font-size: 4em;
  line-height: 0.1em;
  position: absolute;
  top: 0.5em;
}

blockquote p {
  font-size: 1em;
  line-height: 1.45em;
}

blockquote p:first-child {
  text-indent: 2.5em;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

figure {
  margin: 3em 0;
}

figure > a {
  display: block;
  margin: 0 auto;
}

figure > a:hover {
  background: none;
}

figcaption, .wideflex-wrapper > p {
  font-style: italic;
  text-align: center;
}

pre, .table-wrapper {
  max-width: calc(100vw - 48px);
}

@media (min-width: 728px) {
  pre {
    max-width: calc(100vw - 96px);
  }
}

@media (min-width: 1080px) {
  pre {
    max-width: calc(100vw - 128px);
  }
}

code {
  font-size: 1.6em;
  line-height: 1.25em;
}

code, .table-wrapper {
  overflow: auto;
}

p code, ul code, ol code, dl code {
  font-size: 1.2em;
  line-height: 1em;
  background-color: #f0f0f0;
}

ol, ul {
  padding: 0;
}

li, dd {
  margin-left: 30px;
}

dt {
  font-weight: 700;
}

table {
  border-collapse: collapse;
  margin: 1.5em 0;
}

table thead tr {
  background: rgba(0, 102, 0, .1);
  text-align: left;
  font-family: "Lato", sans-serif;
  font-size: 1.2em;
}

th, td {
  padding: 1em 1.3em;
}

table thead tr th {
  padding: 1em 1.15em;
}

tbody tr {
  border-bottom: 1px solid #ddd;
}

tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
}

tbody tr:last-of-type {
  border-bottom: 2px solid #999;
}

summary {
  margin: 2em 0;
  font-family: "Lato", sans-serif;
  font-size: 1.8em;
  font-weight: bold;
}

.summary-inner {
  cursor: pointer;
}

sup, sub {
  line-height: 1.2em;
}

/* Thanks to: inspecting medium.com styles manually */

body, .wideflex-wrapper {
  display: flex;
  justify-content: center;
}

body {
  flex-direction: column;
}

h1, h2, h3, summary, form, article > p, main > p, article > ul, article > ol, article > dl, .tags {
  max-width: 680px;
}

.nav-wrapper, h1, h2, article > h2, h3, summary, form, article > p, main > p, article > ul, article > ol, article > dl, .tags, article > figure, article > .wideflex-wrapper, .prev-next-wrapper, .table-wrapper {
  margin-left: auto;
  margin-right: auto;
}

main {
  margin: 0 2em 2.5em;
}

@media (min-width: 728px) {
  main {
    margin-left: 3em;
    margin-right: 3em;
  }
}

@media (min-width: 1080px) {
  main {
    margin-left: 4em;
    margin-right: 4em;
  }
}

article, .freshest .articles article {
  margin-bottom: 3em;
}

.articles article, .comment {
  margin-bottom: 5em;
}

.author-comment > p:not(.date) {
  padding-left: 1em;
  padding-right: 1.3em;
  border-left: 0.3em solid rgba(205, 255, 205, 0.68);
}

@media (min-width: 1320px) {
  article > figure, article > .wideflex-wrapper, .nav-wrapper, .table-wrapper, .prev-next-wrapper {
    max-width: 1192px;
  }
}

.table-wrapper {
  display: flex;
  flex-direction: column;
}

@media (min-width: 728px) {
  .table-wrapper {
    align-items: center;
  }
}

.collapsed .cell-expand {
  display: none;
}

ul li.listitem-yes, ul li.listitem-no, ul li.listitem-warning, p.listitem-yes, p.listitem-no, p.listitem-warning {
  background-position: 0 0.2em;
  background-repeat: no-repeat;
  padding: 0 0 10px 35px;
  list-style-type: none;
  margin-left: 0;
}

.listitem-yes {
  background-image: url(../img/tick-icon.png);
}

.listitem-no {
  background-image: url(../img/cross-icon.png);
}

.listitem-warning {
  background-image: url(../img/warning-icon.png);
}

/* Thanks to: https://codepen.io/tomhodgins/pen/zqZeqv */

.pagination,
.pagination *,
.pagination *:before,
.pagination *:after {
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
  font-kerning: auto;
}

.pagination {
  font-size: 1.3em;
  line-height: 1;
  font-weight: 400;
  font-family: "Lato", sans-serif;
  margin: 1em auto;
  text-align: center;
  padding: .5em;
}

.pagination ul {
  list-style-type: none;
  display: inline;
  font-size: 100%;
  margin: 0;
  padding: 0;
}

.pagination ul li {
  display: inline-block;
  font-size: 100%;
  width: auto;
  border-radius: 3px;
  padding: 0;
  margin: 0;
}

.pagination a {
  font-size: 100%;
  text-decoration: none;
}

.pagination a, .pagination .pagination-item-inner {
  display: inline-block;
  padding: .5em .8em;
}

.pagination a:hover {
  background: rgba(0, 102, 0, .1);
}

.pagination > a {
  line-height: 1.6;
}

.pagination li.current {
  background: rgba(128, 128, 128, .1);
}

.tags ul, .tag-cloud ul, .years ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin: 3em 0;
}

.tags ul {
  row-gap: 3em;
}

.tag-cloud ul, .years ul {
  justify-content: center;
  row-gap: 1em;
}

.tags ul li, .tag-cloud ul li, .years ul li {
  font-family: "Lato", sans-serif;
  margin: 0 0.5em 0 0;
}

.tags ul li {
  font-size: 1.1em;
  line-height: 1em;
}

.tag-cloud ul li, .years ul li {
  font-size: 1.4em;
  line-height: 1.4em;
}

.tags ul li a, button, input[type="submit"], .button a {
  background: rgba(128, 128, 128, .1);
  padding: 0.8em 1em 0.9em;
  text-decoration: none;
}

.tags ul li a:hover, button:hover, input[type="submit"]:hover, .button a:hover {
  background: rgba(0, 102, 0, .1);
}

.button {
  font-family: "Lato", sans-serif;
  font-size: 1.4em;
  text-align: center;
  margin-bottom: 2em;
}

.button a {
  display: inline-block;
}

.prev-next-wrapper {
  margin-top: 2em;
}

.prev-next-wrapper > p.prev-link, .prev-next-wrapper > p.prev-link {
  text-align: left;
}

@media (min-width: 728px) {
  .prev-next-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 1em;
  }

  .prev-next-wrapper > p.next-link {
    text-align: right;
  }
}

.portfolio-listing {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.portfolio-listing article {
  margin: 2em 1em;
}

.portfolio-listing article a {
  display: inline-block;
}

/* Thanks to: https://gist.github.com/asilbalaban/7985790 */

input, textarea {
  padding: 0.6em;
  border: 1px solid #ddd;
  outline: 0;
  font-size: 1em;
}

input {
  font-family: "Lora", serif;
  width: 95%;
  margin-bottom: 1em;
}

textarea {
  width: 95.5%;
  height: 10em;
  line-height: 150%;
  margin-bottom: 2em;
}

input:hover, textarea:hover,
input:focus, textarea:focus {
  border-color: #c9c9c9;
}

label {
  font-family: "Lato", sans-serif;
  font-size: 1.3em;
  display: inline-block;
  margin: 0.5em 0;
}

button, input[type="submit"] {
  border: 0;
  font-size: 1em;
  margin-bottom: 1em;
}

button:hover, input[type="submit"]:hover {
  cursor: pointer;
}

.vermiciousknid {
  display: none;
}

.g-recaptcha {
  margin-bottom: 3em;
}

/* Thanks to: https://codepen.io/mithicher/pen/opDgn */

header {
  background: rgba(128, 128, 128, .1);
  margin-bottom: 2em;
}

.nav-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}

header p, header li, #menu-icon, footer p {
  font-family: "Lato", sans-serif;
}

header h1, header p {
  font-size: 1.3em;
  line-height: 1.55em;
  letter-spacing: 0.2em;
  margin: 0;
  font-weight: bold;
  padding: 0;
}

header h1 a, header p a {
  display: inline-block;
  color: rgba(0, 102, 0, .9);
  text-decoration: none;
  padding: 0.6em 0.8em;
}

header h1 a:hover, header p a:hover {
  background: #ddd;
}

header nav {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s;
}

.expand nav {
  max-height: 20em;
}

header ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

header li {
  list-style-type: none;
  display: block;
  margin: 0;
}

header li a {
  display: block;
  text-decoration: none;
  background: rgba(128, 128, 128, .2);
}

header li a:hover {
  background: rgba(0, 102, 0, .1);
}

.site-name-wrapper, header li a {
  border-bottom: 1px solid #bbb;
}

header h1 a, header li a {
  padding: 0.6em 0.8em;
}

#menu-icon {
  position: absolute;
  top: 0;
  right: 1em;
  font-size: 1.3em;
  padding: 0.7em 0.2em;
  cursor: pointer;
}

#menu-icon:hover {
  background: none;
}

header h1 a, #menu-icon {
  display: block;
  text-decoration: none;
}

@media (min-width: 728px) {
  .nav-wrapper {
    flex-direction: row;
  }

  #menu-icon {
    display: none;
  }

  header nav {
    max-height: none;
  }

  header li {
    display: inline-block;
  }

  .site-name-wrapper, header li a {
    border-bottom: 0;
  }

  header {
    border-bottom: 1px solid #bbb;
  }

  header li a {
    background: none;
  }
}

footer p {
  text-align: center;
  font-size: 0.9em;
  letter-spacing: 0.05em;
}

footer p, footer a {
  color: #999;
}