<!DOCTYPE html>
<html>
  <title>${title}</title>
  <meta charset="utf-8">
  <style type="text/css">
    @media print {
      @page {
        size: A4;
        margin: 1cm;
      }
    }
    body {
      font-family: "Cormorant Garamond";
      font-size: 10pt;
      line-height: 1.05;
      counter-reset: sidenote-counter;
    }
    pre {
      font-family: "Fantasque Sans Mono";
      column-span: all;
    }
    h1, h2, h3, h4, h5, h6 {
      font-family: "Cormorant SC";
	    font-weight: 400;
    }
    img {
      max-width: 100%;
    }
    a {
      text-decoration: none;
      color: inherit;
    }
    .footlink {
      font-size: 7pt;
      vertical-align: super;
    }
    #twocol {
      -moz-column-count: 2;
      -webkit-column-count: 2;
      column-count: 2;
      text-align: justify;
    }
    #date #article-src {
      padding-bottom: 10%;
      font-style: italic;
    }
    .footnote {
      font-size: smaller;
      padding-bottom: 0.5em;
    }
    .footnote svg {
      width: 50%;
      height: 50%;
    }
    .endnotebc {
      width: 50%;
      height: 50%;
    }
  </style>
<body>
  <h1>${title}</h1>
  <div id="twocol">
  <p id="date">${date}</p>
  ${article}
  <p id="article-src">Article Source: ${url}</p>
  </div>
</body>
</html>