<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta name="generator" content="pandoc" />$for(author-meta)$
    <meta name="author" content="$author-meta$" />
    $endfor$
    $if(date-meta)$
    <meta name="date" content="$date-meta$" />
    $endif$
    $if(keywords)$
    <meta name="keywords" content="$for(keywords)$$keywords$$sep$, $endfor$" />
    $endif$
    <title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</title>
    <style type="text/css">
     @font-face {
       font-family: raleway;
       src: url(data:application/x-font-truetype;base64,{{raleway}});
     }
     body { font-family: "Fira Sans", sans-serif; }
     code{white-space: pre;}
     .main {
       width: 80%;
       text-align: justify;
       margin-left: auto;
       margin-right: auto;
       font-size: 18px;
       line-height: 150%;
     }
     h1 {
       font-family: raleway;
       font-weight: normal;
       color: #822;
     }
     h2 {
       font-family: raleway;
       font-weight: normal;
       color: #822;
     }
     h3 {
       font-family: raleway;
       font-weight: normal;
       color: #822;
     }
     .footer {
       text-align: center;
     }
     blockquote {
       background-color: #f5f5f5;
       padding-left: 30px;
       padding-right: 30px;
       padding-top: 5px;
       padding-bottom: 5px;
       border-left: 2px solid black;
     }
     p { margin-left: 20pt; margin-right: 20pt; }
     a { text-decoration: none; color: #822; }
     a[href="#backgrounds"]::after {
       content: "Background";
     }

     a[href="#traits"]::before {
       content: url(data:image/svg+xml;base64,{{trait-icon}});
     }
     a[href="#traits"]::after {
       content: "Trait";
     }

     a[href="#relationships"]::before {
       content: url(data:image/svg+xml;base64,{{relationship-icon}});
     }
     a[href="#relationships"]::after {
       content: "Relationship";
     }

     a[href="#objects"]::before {
       content: url(data:image/svg+xml;base64,{{object-icon}});
     }
     a[href="#objects"]::after {
       content: "Object";
     }

     a[href="#stats"]::before {
       content: url(data:image/svg+xml;base64,{{stat-icon}});
     }
     a[href="#stats"]::after {
       content: "Stat";
     }
    </style>
  </head>
  <body>
    <div class="main" >
      <div class="header">
        <h1 id="if-the-sky-were-crooked">$if(title)$ $title$ $endif$</h1>
      </div>
      $body$
        <div class="footer">
          $for(author)$ $author$ $endfor$<br/>
          $if(date)$ $date$ $endif$
        </div>
  </div>
</body>
</html>
