<%
  var
    uri = (site.base_uri || '').replace(/^https?:\/\//, '');
-%>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title><%= site.title %> | Page Not Found</title>
        <style>
          *, *:before, *:after {
            box-sizing: inherit;
          }

          html {
            box-sizing: border-box;
            font-size: 16px;
            height: 100%;
          }

          a,
          a:link {
            border: 1px solid transparent;
            border-bottom-color: #DB4422;
            color: #C9B49D;
            padding: 0 .1em;
            text-decoration: none;
            transition: all 0.3s;
          }

          a:visited {
            color: #EF7464;
          }

          a:hover {
            background-color: #C9B49D;
            border-color: #DB4422;
            border-radius: 3px;
            color: #23191B;
          }

          a:active {
            background-color: #9A949C ;
            color: #23191B;
          }

          body {
              align-items: center;
              background: url("/images/404/infernus.jpg") no-repeat center center fixed;
              background-size: cover;
              color: #9A949C;
              display: flex;
              flex-direction: column;
              justify-content: center;
              line-height: 1.5em;
              min-height: 100vh;
              vertical-align: middle;
          }
          
          .container {
            margin: 0 auto;
            background-color: #23191B;
            background-color: rgba(35,25,27,.7);
            border-radius: 1em;
            max-width: 30em;
            width: 100%;
            padding: 2em;
            margin: 2em auto;
          }

          input::-moz-focus-inner {
            padding: 0;
            border: 0;
          }

          @media all and (min-width: 600px), only screen and (-webkit-min-device-pixel-ratio: 3) {
            body {
              background-image: url("/images/404/infernus-lg.jpg");
            }
          }
        </style>
    </head>
    <body>
      <div class="container">
        <h1>Page Not Found</h1>
        <p>Sorry, but the page you were trying to view does not exist.</p>
        <p>It looks like this was the result of either:</p>
        <ul>
          <li>a mistyped address,</li>
          <li>an out-of-date link, or</li>
          <li>the page having been banished to the burning wastes of Infernus.</li>
        </ul>
        <p>You can <a href="javascript:history.go(-1);" title="Cast Resurrection!">go back and try again</a>,
          or just start over at <a href="/" title="Feare Naught!">the front page for the guide</a>.</p>
        <form name="404SearchForm" id="404SearchForm" action="https://duckduckgo.com/" method="GET">
          <input type="text" name="q" maxlength="255" />
          <input type="hidden" name="kl" value="us-en" /><!-- language -->
          <input type="hidden" name="kh" value="1" /><!-- force https -->
          <input type="hidden" name="kae" value="r" /><!-- theme = retro -->
          <input type="hidden" name="k1" value="1" /><!-- tracker-less ads -->
          <input type="hidden" name="sites" value="<%=uri%>"/>
          <input type="submit" value="Search" />
          <input type="reset" value="Clear" />
          <p>Powered by DuckDuckGo</p>
        </form>
        <p class="404-image-credit">
          Background image released under a <a href="/licenses/cc0">CC0 license</a>.
        </p>
      </div>
    </body>
</html>
