<!DOCTYPE html>
<html>
  <meta>
    <title>Empirical Study{% if self.title() %} | {% block title %}{% endblock %}{% endif %}</title>
    <script src="{{url_for('static', filename='libs/jquery/dist/jquery.min.js')}}"></script>
    <link rel="stylesheet" href="{{url_for('static', filename='libs/@fortawesome/fontawesome-free/css/all.css')}}"/>
    {% block header %}{% endblock %}
    <style>
      html {
        font-size: 62.5%;
      }
      body {
        overscroll-behavior: none;
        font-family: 'Helvetica', sans-serif;
        margin-top: 0;
        color: #333;
      }
      .bodyContent {
        background: #ddd;
      }
      .content {
        margin: 2rem;
        padding-top: .1rem;
        padding-bottom: .1rem;
        width: 60rem;
        margin-left: auto;
        margin-right: auto;
        background: #fff;
        box-shadow: 0px .3rem .5rem rgba(0, 0, 0, .2);
        border-radius: .8rem;
      }
      .content.centered {
        width: 40rem;
        text-align: center;
        box-shadow: 0px .3rem .5rem rgba(0, 0, 0, .2);
        border-radius: .8rem;
      }
      h2 {
        font-size: 4rem;
      }
      .text {
        font-size: 2rem;
      }
      .errorMessage {
        margin: 2rem;
        padding: 1rem 2rem .8rem 2rem;
        border: .1rem solid #cb4335;
        border-radius: .6rem;
        background: #e74c3c;
        color: #fff;
        font-size: 2rem;
      }
      a {
        color: #2980b9;
        text-decoration: none;
      }
      .inputbox {
        width: calc(100% - 2rem - .4rem - 4rem);
        margin: 1.4rem 0 2rem 0;
        padding: 1rem;
        border: .2rem solid #ddd;
        border-radius: .6rem;
        background-color: #f3f3f3;
        text-align: center;
        font-size: 2rem;
        outline: none;
        resize: none;
      }
      .button {
        display: inline-block;
        width: calc(100% - 2rem - 4rem);
        background-color: #333;
        margin-top: 0;
        margin-bottom: 1.6rem;
        _padding: 1.2rem 1rem;
        border: none;
        border-radius: .6rem;
        font-size: 2rem;
        font-weight: 700;
        color: #ddd;
      }
      input.button {
        width: calc(100% - 4rem);
        padding: 1.2rem 0;
      }
      a.button {
        width: calc(100% - 4rem - 2rem);
        padding: 1.2rem 1rem;
      }
      {% block style %}{% endblock %}
    </style>
    <script>
      jQuery(function($) {
        $(window).ready(() => {
          {% if self.contentBox() %}
            $('.content').css({marginTop: ($(window).height() - $('.content').height()) / 2})
            {% endif %}
          {% block script %}{% endblock %}
        })
      })
    </script>
  </meta>
  <body {% if self.content() or self.contentBox() or self.bodyWithContent() %}class="bodyContent"{% endif %}>
    {% block body %}{% endblock %}
    {% block bodyWithContent %}{% endblock %}
    {% if self.content() or self.contentBox() %}
      <div class="content{% if self.contentBox() %} centered{% endif %}">
        {% block content %}{% endblock %}
        {% block contentBox %}{% endblock %}
      </div>
    {% endif %}
  </body>
</html>
