{% include 'header.html' %}
{% from 'macros.html' import breadcrumb %}
<div class="container mx-auto">
 <section class="p-5 mt-5">
  <div class="flex flex-wrap items-center -m-2">
   <div class="w-full md:w-1/2 p-2">
    {{ breadcrumb([
      {'text': 'Home', 'url': '/'},
      {'text': '404', 'url': '/404'}
    ]) }}
   </div>
  </div>
 </section>
{% include 'inc_messages.html' %}
  <section class="relative py-24 md:py-40">
    <div class="relative z-10 container px-4 mx-auto">
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full md:w-1/2 px-4 mb-16 md:mb-0">
          <div class="md:max-w-xl md:mx-auto text-center md:text-left"> <span class="inline-block py-1 px-3 mb-4 text-xs leading-5 bg-blue-500 text-white font-medium rounded-full shadow-sm">Error 404</span>
            <h2 class="mb-4 text-4xl md:text-5xl leading-tight font-bold tracking-tighter dark:text-white">Oh no! Error 404</h2>
            <p class="mb-6 text-lg md:text-xl text-coolGray-500 dark:text-gray-300 ">Something went wrong, so this page is broken.</p>
            <div class="flex flex-wrap">
              <div class="w-full lg:w-auto py-1 lg:py-0 lg:mr-6"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-blue-50 font-medium text-center bg-blue-500 hover:bg-blue-600 border border-blue-500 rounded-md shadow-sm focus:ring-0 focus:outline-none" href="/">Go Back</a></div>
              <div class="w-full lg:w-auto py-1 lg:py-0"><a class="inline-block py-5 px-7 w-full text-base md:text-lg leading-4 text-coolGray-800 font-medium text-center bg-white hover:bg-coolGray-100 border border-coolGray-200 rounded-md shadow-sm focus:ring-0 focus:outline-none" href="/refresh">Try Again</a></div>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/3 px-4"><img class="mx-auto" src="/static/images/other/what-why.gif" alt=""></div>
      </div>
    </div>
  </section>
</div>
{% include 'footer.html' %}
</div>
</body>
</html>