<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ status_code }} - AppHub</title>
    <style>
      *{
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }

      .frem{
          width: 100%;
          height: 100vh;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          background: url(/static/images/gif.gif);
          background-position: center;
          background-repeat: no-repeat;
      }

      .frem p{
          position: absolute;
          top: 3rem;
          font-size: 7rem;
          color: #00000063;
      }
      .frem h2{
          position: absolute;
          bottom: 8rem;
          font-size: 34px;
      }
      .frem h5{
          position: absolute;
          bottom: 6rem;
          color: #9c9c9c;
      }
      .frem a{
          position: absolute;
          bottom: 1rem;
          background: linear-gradient(45deg, #ff0034, #ffbc00);
          padding: 12px;
          color: white;
          text-decoration: none;
          font-size: 23px;
          border-radius: 13px;
      }
    </style>
  </head>
  <body>
    <div class="frem">
        <p>{{ status_code }}</p>
        <h2>{{ message }}</h2>
        <h5>{{ description }}</h5>
        <a href="/">Go to Home</a>
    </div>
  </body>
</html>
