<html>
  <head>
    <title>{{ status }}</title>
    <style>
      html {
          height: 100%;
          background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
          overflow: hidden;
      }

      #title {
          left: 0;
          right: 0;
          color: #FFF;
          text-align: center;
          font-family: "lato", sans-serif;
          font-weight: 300;
          font-size: 20px;
          letter-spacing: 10px;
          margin-top: 60px;
      }

      #logo {
          width: 400px;
          margin-bottom: 10px;
          color: #FFF;
      }

      @keyframes animStar {
          from {
              transform: translateY(0px);
          }
          to {
              transform: translateY(-2000px);
          }
      }

      pre {
          background-color: #f0f0f0;
          color: #000;
          letter-spacing: 0px;
          padding: 0;
          font-size: 12px;
          white-space: pre-wrap;
          white-space: -moz-pre-wrap;
          white-space: -o-pre-wrap;
          word-wrap: break-word;
          opacity: 0.8;
          max-width: 960px;
          border-radius: 10px;
          margin: 0 auto;
          margin-top: 25px;
          text-align: left;
      }
    </style>
  </head>
  <body>
    {% if logo %}
    <img src="{{ logo }}" id="logo" />
    {% endif %}
    <div id='title'>
      <span>
        <h1>{{ title }}</h1>
        {{ message }}
        {% if extra_msg %}
        <pre>
          {{ extra_msg|safe }}
          {% if stacktrace %}
          <code class="erlang">
            {% for s in stacktrace %}
            {{ s.module }}:{{ s.function }}/{{ s.arity }} ({{ s.file }}:{{ s.line }})
            {% endfor %}
          </code>
          {% endif %}
        </pre>
        {% endif %}
      </span>
    </div>
    <script>hljs.highlightAll();</script>
  </body>
</html>
