<!DOCTYPE html>
<html lang="en">

  <head>
    <title>{% block title %}{{ SITENAME }}{% endblock %}</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="{{ SITEURL }}/theme/css/tachyons.min.css" type="text/css" />
    <script type="text/javascript" src="{{ SITEURL }}/theme/js/jquery-3.5.0.min.js"></script>
    <style>
     body {
       font: 1em/1.5 AppleGothic, NanumSquareRound, Sans-serif;
       letter-spacing: +0.02em;
       word-spacing: +0.2em;

       color: rgba(100, 255, 200, 1.0); /* chartreuse */
       /* color: rgba(255, 20, 147, 1.0); */ /* deeppink */
       background-color: rgba(0, 20, 40, 1.0); /* black */
       scrollbar-width: none;
     }

     header {
       font-size: 3.6em;
       font-family: AppleGothic, NanumSquare, Sans-serif;
     }

     body::-webkit-scrollbar {
       width: 0;
       height: 0;
     }

     a {
       color: rgba(100, 255, 200, 0.5);
       text-decoration: none;
     }

     a.noticeable:hover {
       backgrounda-color: rgba(100, 255, 200, 0.15);
       opacity: 0.4;
     }

     a.exlink {
       color: rgba(100, 255, 200, 0.5);
       border-width: 1px;
       border-color: rgba(100, 255, 200, 0.5);
       border-style: solid;
     }

     p {
       margin: 0;
     }

     .paginator {
       color: rgba(100, 255, 200, 0.5);
     }

     article.title {
       font-size: 1.1em;
     }

     time {
       font-size: 0.65em;
     }

     h1, h2, h3, h4, h5, h6 {
       opacity: 0.3;
     }

     ul {
       padding-bottom: 1em;
       padding-inline-start: 2em;
     }

     .footnote-reference {
       font-size: 0.65em;
       vertical-align: super;
     }
    </style>
  </head>

  <body>

    <div style="margin: 1em;">

      <header class="pb5 cf" style="font-size: 3.6em;">
        {% block content_header %}
        {% endblock %}
      </header>

      {% block content %}
      {% endblock %}

    </div>

    <script type="text/javascript">
     $(document).ready(function () {
       $("a[class*=external]").attr("target", "_blank").addClass("exlink");
     });
    </script>

  </body>

</html>
