<!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, NanumGothic, Sans-serif;
       letter-spacing: +0.02em;
       word-spacing: +0.2em;

       scrollbar-width: none;
     }

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

     .shrinkingtitle {
       font-size: 0.8em;
     }

     @media only screen and (max-width: 600px) {
       .shrinkingtitle {
         font-size: 0.5em;
       }
     }

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

     a {
       color: black;
       text-decoration: none;
     }

     a.noticeable:hover {
       background-color: rgba(0, 0, 0, 0.1);
     }

     p {
       margin: 0;
     }

     .paginator {
       opacity: 0.5;
     }

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

     time {
       font-size: 0.65em;
     }

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

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

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

  <body>

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

      <header class="pb5 cf">
        {% block content_header %}
        {% endblock %}
      </header>

      {% block content %}
      {% endblock %}

    </div>

    <script type="text/javascript">
     $(document).ready(function () {
       $('a[class*=external]').attr('target', '_blank').css('background-color', 'rgba(0, 0, 0, 0.1)');
     });
    </script>

  </body>

</html>
