html {
    font-size: 17px;
  }
  body {
    line-height: 1.7;
    font-size: 1rem;
    font-family: 'Raleway',sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  img {
    width: 97%;
    max-width: 680px;
    margin-top: 0.75em;
    margin-bottom: 1.75em;
  }
  
  img.right, img.left, img.center {
    width: 33%;
    min-width: 150px;
    margin: 0.75em;
    margin-top: 0.5em;
  }

  img.right {
    float: right;
  }
  
  img.left {
    float: left;
  }
  
  img.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  
  img.bordered {
    border: 1px solid black;
  }
  
  img.dropshadow {
    box-shadow: 0 0  0 2px rgb(255,255,255),
                0.3em 0.3em 1em rgba(0,0,0,0.3);
  }
  
  img+em {
    display: block;
    font-style: normal;
    font-size: smaller;
    line-height: 1.6;
    color: #444;
    position: relative;
    top: -1.5em;
    margin-left: auto;
    margin-right: auto;
  }
  
  .credit, .credit a {
    color: #999;
    text-decoration: none;
  }
  
  strong {
    font-weight: 600;
  }
  
  a {
    color: #111;
    text-decoration: underline #006c9e;
    text-decoration-style: dotted;
    text-underline-position: under;
  }
  a:visited {
    text-decoration-color: #111;
  }
  a:hover {
    color: #006c9e;
  }

  p a {
    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;

    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;

    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
  }

  p,ul {
    margin: 0.8rem 0
  }

  ul {
    margin: 0;
    padding-left: 40px;
  }

  body,h1 a {
    color: #111
  }
  
  h1,h2,h3,h4,.comments summary {
    font-family: 'Lora', serif;
    line-height: 1.25;
    letter-spacing: -0.03125em;
  }
  h1 {
    font-size: 2rem;
    margin-bottom: 1.75rem;
    font-weight: 500;
  }
  h2,.comments summary {
    font-size: 1.4rem;
    font-weight: normal;
    margin-top: 2rem;
    margin-bottom: .5rem;
  }
  h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #444;
    margin-top: 2rem;
    margin-bottom: .5rem;
  }
  h4 {
    font-size: 1.1rem;
    font-weight: normal;
    margin-top: 2rem;
    margin-bottom: .5rem;
  }
  
  .starred {
    font-size: 70%;
    text-decoration: none;
    vertical-align: 15%;
  }
  
  blockquote {
    line-height: 1.5;
    color: #666;
    margin-top: 1.5em;
    margin-left: 40px;
    margin-bottom: 2em;
  }
  
  table {
    width: 100%;
    margin-top: 1.5em;
    margin-bottom: 2em;
    padding-left: 30px;
    padding-right: 30px;
    border-spacing: 10px 0px;
    font-size: 0.9rem;
  }
    
  th {
    text-align: left;
    border-bottom: 1px #666 solid;
    vertical-align: bottom;
  }

  td {
    vertical-align: top;
  }
    
  hr {
      border: none;
      height: 4em;
  }

  sup, sub {
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
  }
  sub { 
    top: 0.4em; 
  }
  
  div.footnotes::before {
    display: block;
    content: "Notes";
    font-family: 'Lora', serif;
    line-height: 1.25;
    letter-spacing: -0.03125em;
    font-size: 1.4rem;
    font-weight: normal;
    margin-top: 2rem;
    margin-bottom: .5rem;
  }
  
  div.footnotes, footer {
    border-top: 1px #666 solid;
    margin-top: 4rem;
    padding-top: 0.5rem;
  }
  
  .postmeta {
    color: #666;
  }

  div.footnotes+footer {
    border-top: none;
    margin-top: 1rem;
  }
  
  body {
    margin: 0 auto;
  }
  
  body {
    max-width: 680px;
    padding: 25px;
    margin-left: auto;
    margin-right: auto
  }

  nav {
    position: absolute;
    top: 40px;
    right: 50%;
    margin-right: 380px!important;
  }
  
  nav div {
    font-size: 1rem;
    font-family: "Lora";
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    white-space: nowrap;
  }
  
  nav ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
  }
  
  nav a, .postlist a {
    text-decoration: none;
    color: #111
  }
  
  nav a:hover, .postlist a:hover {
    text-decoration: underline;
    text-underline-position: under;
    text-decoration-style: dotted;
    color: #006c9e;
  }
   
  nav a:visited {
    text-decoration-color: #006c9e;
  }
  
  nav li.current {
    list-style-type: square;
    list-style-type: "> "
  }

  .postlist {
    display: grid;
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    grid-template-columns:1fr min-content;
    margin-top: 2.5em;
    margin-bottom: 2em;
    font-size: 0.9rem;
  }

  .postlist > div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis
  }

  .postlist time {
    font-variant-numeric: tabular-nums;
    white-space: pre
  }

  @media (max-width: 680px) {
    body {
      width: auto;
      padding-left: 20px;
      padding-right: 15px;
    }  

    .postlist {
      grid-template-columns: 1fr;
      grid-row-gap:0
    }

    .postlist div {
      white-space: normal;
      font-weight: 600
    }

    .postlist time {
      padding-bottom:20px
    }
  }  

  @media (min-width: 1050px) {
    img.wide, table.wide {
      max-width: 960px;
      position: relative;
      width: 960px;
      left: -140px;
    }
  }

  @media (max-width: 1050px) {
    nav {
      position: static;
      right: auto;
      top: auto;
      margin-right: auto;
      margin-bottom: 20px;
    }  
    
    main {
      border-top: 1px solid black;
    }
  }  

  pre {
    line-height: 1.1
  }

  code {
    font-size: 0.95rem;
    font-family:
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        "Courier New",
        monospace;
  }

  pre code {
    font-size: 0.75rem;
  }

  .highlight pre {
    overflow-x: scroll;
    background-color: #f8f8f8;
    border: 1px dotted #ddd;
    padding: 15px
  }
  
  h2 a, h3 a, h4 a {
    display: none;
  }

  h2:hover a, h3:hover a, h4:hover a {
    display: inline;
  }

  h2 a, h3 a, h4 a {
        content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNjIuNyAxNjIuNyI+PHBhdGggZD0iTTE1MiAxMWEzNyAzNyAwIDAwLTUzIDBMNzYgMzRsMTEgMTAgMjMtMjNhMjIgMjIgMCAwMTMxIDMybC0zNCAzNGEyMiAyMiAwIDAxLTMyIDBMNjUgOThhMzcgMzcgMCAwMDUyIDBsMzUtMzRjMTQtMTUgMTQtMzkgMC01M3oiLz48cGF0aCBkPSJNNTMgMTQxYTIyIDIyIDAgMDEtMzItMzFsMzUtMzVjOS04IDIzLTggMzEgMGwxMS0xMGEzNyAzNyAwIDAwLTUzIDBMMTEgOTlhMzcgMzcgMCAwMDUzIDUzbDIzLTIzLTExLTExLTIzIDIzeiIvPjwvc3ZnPg==');
    top: 0.1em;
    position: relative;
    width: 0.8em;
  }

  :target {
    animation: 0.5s flashin cubic-bezier(.5,0.05,1,.5);
  }
  @keyframes flashin {
    0%   { transform: translate(1em, 0); }
    60%  { transform: translate(0em, 0); }
    75%  { transform: translate(0.25em, 0); }
    90%  { transform: translate(0em, 0); }
    95%  { transform: translate(0.0625em, 0); }
    100% { transform: translate(0em, 0); }
  }
  
  .twittericon {
    content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMzUgMjc2IiBmaWxsPSIjM2JhOWVlIj4KICA8cGF0aCBkPSJtMzAyIDcwYTE5NSAxOTUgMCAwIDEgLTI5OSAxNzUgMTQyIDE0MiAwIDAgMCA5NyAtMzAgNzAgNzAgMCAwIDEgLTU4IC00NyA3MCA3MCAwIDAgMCAzMSAtMiA3MCA3MCAwIDAgMSAtNTcgLTY2IDcwIDcwIDAgMCAwIDI4IDUgNzAgNzAgMCAwIDEgLTE4IC05MCAxOTUgMTk1IDAgMCAwIDE0MSA3MiA2NyA2NyAwIDAgMSAxMTYgLTYyIDExNyAxMTcgMCAwIDAgNDMgLTE3IDY1IDY1IDAgMCAxIC0zMSAzOCAxMTcgMTE3IDAgMCAwIDM5IC0xMSA2NSA2NSAwIDAgMSAtMzIgMzUiLz4KPC9zdmc+Cg==');
  width: 1em;
  top: 0.15em;
  position: relative;
}


  .highlight .hll { background-color: #ffffcc }
  .highlight .c { color: #8f5902; font-style: italic } 
  .highlight .err { color: #a40000; border: 1px solid #ef2929 } 
  .highlight .g { color: #000000 } 
  .highlight .k { color: #204a87; font-weight: bold } 
  .highlight .l { color: #000000 } 
  .highlight .n { color: #000000 } 
  .highlight .o { color: #ce5c00; font-weight: bold } 
  .highlight .x { color: #000000 } 
  .highlight .p { color: #000000; font-weight: bold } 
  .highlight .cm { color: #8f5902; font-style: italic } 
  .highlight .cp { color: #8f5902; font-style: italic } 
  .highlight .c1 { color: #8f5902; font-style: italic } 
  .highlight .cs { color: #8f5902; font-style: italic } 
  .highlight .gd { color: #a40000 } 
  .highlight .ge { color: #000000; font-style: italic } 
  .highlight .gr { color: #ef2929 } 
  .highlight .gh { color: #000080; font-weight: bold } 
  .highlight .gi { color: #00A000 } 
  .highlight .go { color: #000000; font-style: italic } 
  .highlight .gp { color: #8f5902 } 
  .highlight .gs { color: #000000; font-weight: bold } 
  .highlight .gu { color: #800080; font-weight: bold } 
  .highlight .gt { color: #a40000; font-weight: bold } 
  .highlight .kc { color: #204a87; font-weight: bold } 
  .highlight .kd { color: #204a87; font-weight: bold } 
  .highlight .kn { color: #204a87; font-weight: bold } 
  .highlight .kp { color: #204a87; font-weight: bold } 
  .highlight .kr { color: #204a87; font-weight: bold } 
  .highlight .kt { color: #204a87; font-weight: bold } 
  .highlight .ld { color: #000000 } 
  .highlight .m { color: #0000cf; font-weight: bold } 
  .highlight .s { color: #4e9a06 } 
  .highlight .na { color: #c4a000 } 
  .highlight .nb { color: #204a87 } 
  .highlight .nc { color: #000000 } 
  .highlight .no { color: #000000 } 
  .highlight .nd { color: #5c35cc; font-weight: bold } 
  .highlight .ni { color: #ce5c00 } 
  .highlight .ne { color: #cc0000; font-weight: bold } 
  .highlight .nf { color: #000000 } 
  .highlight .nl { color: #f57900 } 
  .highlight .nn { color: #000000 } 
  .highlight .nx { color: #000000 } 
  .highlight .py { color: #000000 } 
  .highlight .nt { color: #204a87; font-weight: bold } 
  .highlight .nv { color: #000000 } 
  .highlight .ow { color: #204a87; font-weight: bold } 
  .highlight .w { color: #f8f8f8; text-decoration: underline } 
  .highlight .mf { color: #0000cf; font-weight: bold } 
  .highlight .mh { color: #0000cf; font-weight: bold } 
  .highlight .mi { color: #0000cf; font-weight: bold } 
  .highlight .mo { color: #0000cf; font-weight: bold } 
  .highlight .sb { color: #4e9a06 } 
  .highlight .sc { color: #4e9a06 } 
  .highlight .sd { color: #8f5902; font-style: italic } 
  .highlight .s2 { color: #4e9a06 } 
  .highlight .se { color: #4e9a06 } 
  .highlight .sh { color: #4e9a06 } 
  .highlight .si { color: #4e9a06 } 
  .highlight .sx { color: #4e9a06 } 
  .highlight .sr { color: #4e9a06 } 
  .highlight .s1 { color: #4e9a06 } 
  .highlight .ss { color: #4e9a06 } 
  .highlight .bp { color: #3465a4 } 
  .highlight .vc { color: #000000 } 
  .highlight .vg { color: #000000 } 
  .highlight .vi { color: #000000 } 
  .highlight .il { color: #0000cf; font-weight: bold } 
  
  abbr {
    font-variant-caps: all-small-caps;
    font-variant-numeric: oldstyle-nums;
    font-style: normal;
  }
  
  summary {
    outline: none;
  }
  
  section.comments {
    margin-top: 3em;
  }
  
  article.comment, article.pingback {
    margin-top: 2.5em;
    margin-bottom: 3em;
    font-size: 0.9rem;
  }
  
  article.comment article.comment {
    margin-left: 2em;
  }
  
  .comment-meta, .pingback-meta {
    margin-top: -0.5em;
    text-align: right;
  }
  
  .comment-author {
    font-size: 0.8rem;
  }
  
  .comment-date, .pingback-date {
    color: #999;
    font-size: 0.7rem;
  }

  form {
    display: grid;
    grid-column-gap: 15px;
    grid-row-gap: 10px;
    grid-template-columns:min-content 1fr;
    margin-top: 2.5em;
    margin-bottom: 2em;
  }

  form .hp {
    display: none;
  }