<!DOCTYPE html>
<html lang="en">
  <head>
    <%- include('../components/header.ejs') %>
  </head>

  <body
    class="mocha bg-ctp-base backdrop-filter bg-no-repeat scroll-smooth backdrop-blur-md transform-gpu"
    id="bg"
  >
    <!-- Hero -->
    <div
      class="lg:px-24 lg:py-24 md:py-20 md:px-44 px-4 py-24 items-center flex justify-center flex-col-reverse lg:flex-row md:gap-28 gap-16"
    >
      <div class="xl:pt-24 w-full xl:w-1/2 relative pb-12 lg:pb-0">
        <div class="relative">
          <div class="absolute">
            <div class="">
              <h1 class="my-2 text-ctp-pink font-calsans font-bold text-2xl">
                Looks like you've found the doorway to the great nothing
              </h1>
              <p class="my-2 text-ctp-text ">
                Woops! You and Me both messed up! Go back to your previous page with shiny button!
              </p>
              <button
                class="sm:w-full lg:w-auto my-2 font-semibold  hover:scale-110 transition rounded md py-4 px-8 text-center bg-ctp-surface0 text-white hover:bg-ctp-surface0/65 focus:outline-none focus:ring-2 "
                onClick="history.back()"
              >
                Take me there!
              </button>
            </div>
          </div>
          <div></div>
        </div>
      </div>
    </div>
  </body>
</html>
