<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page Not Found</title>
  <style>
    body {
      font-family: Roboto, sans-serif;
      margin: 0px;
    }

    .code {
      position: relative;
      width: 369px;
      height: 42.0px;

      font-family: Roboto;
      font-style: normal;
      font-weight: normal;
      font-size: 36px;
      line-height: 42px;
      text-decoration: underline;

      display: flex;
      align-items: center;

      color: rgba(255, 255, 255, 0.84);
    }

    .text-msg {
      position: relative;
      width: 460px;
      height: 320px;
      margin: auto;

      font-family: Roboto;
      font-style: normal;
      font-weight: normal;
      font-size: 36px;
      line-height: 42px;
      text-indent: 8px;

      color: #FFFFFF;
    }

    .popup {
      margin: auto;
      min-width: 500px;
      min-height: 400px;
      width: 30%;

      padding: 10px;

      background: linear-gradient(165.31deg, rgba(67, 151, 141, 0.44) 18.49%, rgba(67, 151, 141, 0) 97.15%);
      box-shadow: 0px 13px 6px 4px rgba(0, 0, 0, 0.25);
      backdrop-filter: blur(12px);
    }

    .major-blur {
      height: 100vh;
      background: rgba(38, 77, 89, 0.199);
      backdrop-filter: blur(4px);

      display: flex;
      flex-direction: column;
    }

    .flex-grow {
      flex-grow: 1;
    }

    .button-back {
      margin: auto;
      margin-bottom: 16px;
      width: 269px;
      height: 69px;


      background: linear-gradient(272.39deg, rgba(247, 175, 67, 0.93) -34.2%, rgba(245, 72, 17, 0.93) 100%);
      box-shadow: 0px 8px 4px rgba(0, 0, 0, 0.25);
      border-radius: 20px;
    }

    .bg {
      background-image: url('/img/Banner.jpg');

      height: 100vh;

      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      background-attachment: fixed;

    }

    p {
      padding-top: 12px;
      font-size: 28px;
      text-align: center;
      font-family: Roboto;
      font-style: normal;
      font-weight: normal;
      line-height: 42px;
      text-indent: 8px;

      color: #FFFFFF;
    }
  </style>
</head>

<body>
  <div class="bg">
    <div class="major-blur flex">
      <div class="flex-grow"></div>
        <div class="popup" >
          <div>
            <p class="code">404 Page not Found</p>
            <p class="text-msg">It appears that you’ve wandered too far from the forest, press the magic button below to get back.</p>
            
            <a style="text-decoration: none;" href="https://foxbank-69.web.app/" >
              <div class="button-back">
                <p  class="text-center">Take me back!</p>
              </div>
            </a>
          </div>
        </div>
      <div class="flex-grow"></div>
    </div>
  </div>  

</body>

</html>