<!DOCTYPE html>

<html>
  <head>
    <!-- External CSS files -->
    <link rel="stylesheet" href="../static/css/fonts.css">
    {% if preview %}
    <link rel="stylesheet" href="../static/css/preview.css">
    {% endif %}

    <!-- Cover letter styles (cover-specific, uses resume_config values) -->
    <style>
      /* General style */
      html, body, p, ul, li {
        margin: 0;
        padding: 0;
        font-size: 10pt;
        line-height: 1.8;
        font-family: 'Avenir 35';
      }

      /* Titles */
      h1, h2, h3, h4, h5, h6 {
        font-weight: normal;
      }
      h1, h2, h3, h5 {
        color: {{ resume_config.get("theme_color", "#0395DE") }};
      }
      h1 {
        font-size: 30pt;
        font-family: 'Avenir 35';
        padding-top: 11mm;
        padding-bottom: 8.5mm;
        padding-right: {{ resume_config.get("padding", 12) }}mm;
        text-align: center;
        border-bottom: 3px solid {{ resume_config.get("sidebar_color", "#F6F6F6") }};
      }
      h2 {
        font-size: 16pt;
        font-family: 'Avenir 55';
        margin-top: 4mm;
        margin-bottom: 0mm;
      }
      h3 {
        font-size: 14pt;
        font-family: 'Avenir 45';
        margin-top: 2mm;
        margin-bottom: 0mm;
      }
      h4 {
        font-size: 10pt;
        font-family: 'Avenir 45';
      }
      .markdown-strong {
        font-family: 'Avenir 65', 'Avenir 55', 'Avenir 45', 'Helvetica Neue', Arial, sans-serif !important;
        font-weight: 700 !important;
      }

      /* List styles */
      ul {
        list-style-type: none;
      }
      li:before {
        content: "- ";
      }

      /* Layout styles */
      .frame {
        padding-top: {{ resume_config.get("frame_padding", 15) }}mm;
        padding-bottom: {{ resume_config.get("frame_padding", 15) }}mm;
        padding-left: {{ resume_config.get("frame_padding", 15) }}mm;
        padding-right: {{ resume_config.get("frame_padding", 15) }}mm;
        background-color: {{ resume_config.get("frame_color", "#757575") }};
      }
      .page {
        page-break-after: always;
        width: {{ resume_config.get("page_width", 210) }}mm;
        height: {{ resume_config.get("page_height", 297) }}mm;
        background-color: white;
      }
      .body {
        float: left;
        width: {{ resume_config.get("page_width", 210) }}mm;
        height: {{ resume_config.get("page_height", 297) }}mm;
      }

      /* Content styles */
      .description {
        padding-top: {{ resume_config.get("cover_padding_top", 15) }}mm;
        padding-bottom: {{ resume_config.get("cover_padding_bottom", 15) }}mm;
        padding-left: {{ resume_config.get("cover_padding_h", 20) }}mm;
        padding-right: {{ resume_config.get("cover_padding_h", 20) }}mm;
      }

      code {
        font-size: 85%;
        margin: 0;
        background-color: rgba(27,31,35,.05);
        padding: .2em .4em;
      }

    </style>
  </head>

  <body>

    <!-- This will add a nice frame when previewing but not when printing -->
    {% if preview %}<div class="frame">{% endif %}

      <div class="page">
        <div class="body">
          <h1>{{ full_name }}</h1>

          {% if description %}
          <div class="description">
            {% autoescape false %}
              {{ description }}
            {% endautoescape %}
          </div>
          {% endif %}

        </div>
      </div>

    <!-- And the closing of the frame -->
    {% if preview %}</div>{% endif %}

  </body>
</html>
