@import url("https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed:400,700");
@import url("https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap");
body {
  font-family: 'Lora', serif;
  color: #121d26;
  background: #eeeeee; }

.centered {
  max-width: calc(960px - 4em);
  margin: 0 auto 0 auto;
  padding-left: 2em;
  padding-right: 2em; }

header {
  font-family: 'Roboto Condensed', sans-serif;
  text-transform: uppercase;
  font-variant: small-caps;
  background: url(../images/trinity.jpg);
  background-position: center;
  background-size: 1200px 560px;
  margin-bottom: 2em;
  padding-top: 1.5em;
  padding-bottom: 1.5em; }
  header a {
    font-size: 2em;
    color: white;
    text-decoration: none;
    font-weight: bold; }
    header a:hover {
      border-bottom: 5px solid #3a88c4; }
  header div.shaded {
    background: rgba(0, 0, 0, 0.5);
    padding-top: 1.5em;
    padding-bottom: 1.5em;
    min-height: 1em;
    display: inline-block;
    width: 100%; }
  header img {
    height: 4em;
    position: relative;
    top: .5em;
    margin-right: .5em;
    margin-top: -2em; }
  header div#header-logo {
    display: inline; }
  header nav {
    display: inline-block;
    float: right; }
    header nav a {
      margin-left: 0.5em; }
    header nav a:first-child {
      margin-left: 0em; }
  @media screen and (max-width: 800px) {
    header {
      text-align: center; }
      header img {
        position: static;
        top: 0em;
        margin: 0em 0em 1em 0em; }
      header div#header-logo {
        display: block; }
      header nav {
        float: none;
        width: 100%; } }

body, html {
  height: 100%; }

#wrapper {
  min-height: 100%;
  position: relative; }

main {
  padding-bottom: calc(140px + 2em); }
  @media screen and (max-width: 800px) {
    main {
      padding-bottom: calc(180px + 2em); } }
  @media screen and (max-width: 600px) {
    main {
      padding-bottom: calc(230px + 2em); } }

footer {
  position: absolute;
  bottom: 0;
  height: 140px;
  width: 100%;
  background: #121d26;
  color: white; }
  @media screen and (max-width: 800px) {
    footer {
      height: 180px; } }
  @media screen and (max-width: 600px) {
    footer {
      height: 230px; } }
  footer p {
    margin-top: 1em;
    margin-bottom: 0; }
    footer p:first-child {
      margin-top: 0; }
  footer .centered {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%); }
  footer a {
    color: white;
    text-decoration: underline; }
    footer a:hover {
      color: #3a88c4; }
  footer #feed-button, footer #twitter-button, footer #github-button {
    width: 1em;
    height: 1em;
    margin-left: .1em;
    padding-left: 1.25em;
    background-size: 1em 1em;
    background-position: 0 .1em;
    background-repeat: no-repeat; }
  footer #feed-button {
    background-image: url(../images/icons8-rss-dark.png); }
    footer #feed-button:hover {
      background-image: url(../images/icons8-rss-blue.png); }
  footer #twitter-button {
    background-image: url(../images/icons8-twitter-white.png); }
    footer #twitter-button:hover {
      background-image: url(../images/icons8-twitter-blue.png); }
  footer #github-button {
    background-image: url(../images/icons8-github-white.png); }
    footer #github-button:hover {
      background-image: url(../images/icons8-github-blue.png); }

main {
  line-height: 2em;
  text-align: left; }
  main mjx-container[jax="SVG"] > svg a {
    fill: #3a88c4;
    stroke: #3a88c4; }
  main a {
    color: #3a88c4;
    text-decoration: none;
    word-wrap: break-word; }
    main a:hover {
      text-decoration: underline; }
  main h1, main h2, main h3 {
    padding: 0;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    max-width: 100%; }
  main h1 {
    font-size: 2em; }
  main h2 {
    font-size: 1.25em; }
  main h3 {
    font-size: 1em; }
  main h1 {
    margin-top: 0.2em; }
  main h2 {
    margin-top: 1.5em; }
  main h3 {
    margin-top: 1.0em; }
  main article {
    background: white;
    padding: 1em; }
  main article > img.representative-image {
    display: block;
    object-fit: contain;
    height: auto;
    max-height: 300px;
    width: 100%;
    margin: 0 auto 2em auto; }
  main p.representative-image-attribution {
    font-size: .7em;
    padding: 0;
    margin: -2.85em 0 2.85em 0;
    height: 1em;
    text-align: center; }
    main p.representative-image-attribution a {
      color: #c0c0c0; }
      main p.representative-image-attribution a:hover {
        color: #c0c0c0;
        text-decoration: underline; }
  main article > date {
    margin-top: 2em;
    color: #c0c0c0;
    display: block; }
  main article > nav {
    margin-top: 2em;
    overflow: hidden; }
    main article > nav .prev {
      float: left; }
    main article > nav .next {
      float: right; }
  main .image-container {
    margin: 3em auto 2em auto;
    max-width: 800px;
    text-align: center; }
    main .image-container img {
      max-width: 100%;
      height: auto;
      width: auto\9;
      display: block;
      margin: 0 auto 0 auto; }
    main .image-container .caption {
      font-size: 0.9em;
      line-height: 1.5em;
      margin-top: 1em;
      text-align: left;
      display: inline-block; }
  main p {
    margin: 1em 0 0 0; }
  main .tags + p {
    margin-top: 2em; }
  main div.highlight {
    padding: 0;
    margin: 0;
    border-radius: 5px; }
  main pre.highlight {
    font-size: 0.9em;
    padding: 1em;
    border-radius: 5px;
    line-height: 1.25em;
    margin-top: 1em;
    margin-bottom: 1em; }
  main h1, main h2, main h3 {
    position: relative;
    left: -42px;
    width: calc(100% + 42px);
    padding-left: 42px; }
    main h1.small-share-shift, main h2.small-share-shift, main h3.small-share-shift {
      left: -25px;
      width: calc(100% + 25px);
      padding-left: 25px; }
    main h1.no-link, main h2.no-link, main h3.no-link {
      position: static;
      left: 0;
      width: 100%;
      padding-left: 0; }
    main h1 .link, main h1 .ok, main h2 .link, main h2 .ok, main h3 .link, main h3 .ok {
      position: absolute;
      left: 0;
      top: 5px;
      width: 20px;
      height: 20px;
      background-repeat: no-repeat;
      background-size: 20px 20px;
      background-position: 0 0; }
    main h1 .link, main h2 .link, main h3 .link {
      background-image: url(../images/icons8-link-grey.png); }
    main h1 .ok, main h2 .ok, main h3 .ok {
      top: -20px;
      background-image: url(../images/icons8-ok.png);
      opacity: 0; }
    main h1:hover, main h2:hover, main h3:hover {
      cursor: pointer; }
      main h1:hover .link, main h2:hover .link, main h3:hover .link {
        background-image: url(../images/icons8-link-blue.png); }
  main mjx-container[jax="SVG"] {
    overflow-x: auto;
    overflow-y: hidden;
    direction: ltr;
    min-width: auto !important; }
  main code.highlighter-rouge {
    background: #efefef;
    color: #121d26;
    padding: 3px 5px 2px 5px;
    border-radius: 2px; }
  main .footnotes {
    margin-top: 2em; }
    main .footnotes:before {
      content: 'footnotes';
      font-family: 'Roboto Condensed', sans-serif;
      font-weight: bold;
      text-transform: uppercase; }
  main ul p, main ol p {
    margin: 0; }
  main ol.custom {
    counter-reset: list; }
    main ol.custom > li {
      list-style: none;
      position: relative; }
      main ol.custom > li:before {
        counter-increment: list;
        position: absolute; }
  main ol.parentheses > li:before {
    content: "(" counter(list) ") ";
    left: -1.4em; }
  main ol.parentheses_roman > li:before {
    content: "(" counter(list,lower-roman) ") ";
    text-align: right;
    display: inline-block;
    width: 30px;
    left: -2.3em; }
  main ol.questions > li:before {
    content: "Q" counter(list) ". ";
    left: -1.8em; }
  main table {
    margin: 3em auto 0 auto;
    border-top: 2px solid black;
    border-bottom: 2px solid black; }
    main table th {
      border-bottom: 1px solid black; }
    main table th:first-of-type, main table td:first-of-type {
      padding-left: .5em; }
    main table th:last-of-type, main table td:last-of-type {
      padding-right: .5em; }
    main table td + td, main table th + th {
      padding-left: 1em; }
  main .table-caption {
    margin-top: 1em;
    text-align: center;
    margin-bottom: 2em; }

#disqus_thread {
  margin-top: 1.5em; }

main .tags {
  margin-bottom: 1.5em; }
  main .tags .tag {
    background: #121d26;
    color: #fff;
    height: 1.5em;
    line-height: 1.5em;
    padding: 0 .2em 0 .5em;
    display: inline-block;
    margin-top: .5em;
    margin-right: 1.25em;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    position: relative;
    font-family: 'Roboto Condensed', sans-serif; }
  main .tags .tag:after {
    content: '';
    border-style: solid;
    border-color: transparent transparent transparent #121d26;
    border-width: .75em 0 .75em .75em;
    float: right;
    position: absolute;
    top: 0;
    right: -.75em;
    width: 0;
    height: 0; }
  main .tags a.tag {
    text-decoration: none; }
    main .tags a.tag:hover {
      background: #c0c0c0;
      color: #121d26; }
    main .tags a.tag:hover:after {
      border-color: transparent transparent transparent #c0c0c0; }
  main .tags.posts-by-tag {
    margin-top: -0.5em;
    margin-bottom: -0.25em; }
main ul.posts {
  list-style: none;
  margin: 0;
  padding: 0; }
  main ul.posts li {
    cursor: pointer;
    background: white;
    text-decoration: none;
    color: #121d26;
    display: block;
    padding: calc(1em - 2.5px);
    border: 2.5px solid white;
    line-height: 1.85em; }
    main ul.posts li:hover {
      border: 2.5px solid #3a88c4; }
    main ul.posts li .representative-image {
      display: inline-block;
      width: 190px;
      height: 190px;
      float: left;
      background-position: center;
      background-size: cover;
      margin-right: 1em; }
    main ul.posts li .with-image {
      min-height: 190px; }
    main ul.posts li h2 {
      margin-top: 0;
      margin-bottom: .5em; }
      @media screen and (max-width: 500px) {
        main ul.posts li h2 {
          width: 100%;
          display: inline-block;
          margin-top: .5em; } }
      main ul.posts li h2 date {
        font-family: 'Roboto', sans-serif;
        font-size: 0.8em;
        font-weight: normal;
        text-transform: none;
        float: right;
        color: #c0c0c0;
        margin-left: 1em; }
    main ul.posts li .authors {
      margin-bottom: .5em; }
  main ul.posts li + li {
    margin-top: 1em; }