<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Ragna</title>
    <link rel="icon" type="image/x-icon" href="imgs/ragna_logo.svg" />
    <!-- Bootstrap https://getbootstrap.com -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
      crossorigin="anonymous"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
    />
  </head>
  <style>
      body {
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;

        background-color: ghost-white;
      }

      .auth {
        height: 400px;
        width: 400px;
        background-color: white;
        padding: 20px;
        box-shadow: 20px;
      }

      {{ __template_css__ }}
  </style>
  <body>
    <div class="auth border rounded bg-light">
      {% block content %}{% endblock %}
    </div>
  </body>
</html>
