
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />

  <!-- Browser tab title -->
  <title>404 • Page not found</title>

  <meta name="color-scheme" content="dark" />

  <style>
    :root{
      --bg0:#0b0f14;
      --bg1:#121a22;
      --teal:#0a9a90;
      --ink:#e9edf3;
      --muted:#aab4c3;
    }

    *{box-sizing:border-box}
    html,body{height:100%}

    body{
      margin:0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial;
      color:var(--ink);
      background:
        radial-gradient(900px 500px at 20% 30%, rgba(79,124,255,.12), transparent 60%),
        radial-gradient(800px 500px at 80% 70%, rgba(10,154,144,.12), transparent 60%),
        linear-gradient(180deg, var(--bg1), var(--bg0));
      display:flex;
      flex-direction:column;
    }

    /* Top bar */
    .topbar{
      height:48px;
      background:var(--teal);
      display:flex;
      align-items:center;
      box-shadow: 0 10px 28px rgba(0,0,0,.35);
    }

    .topbar__inner{
      max-width:1220px;
      margin:0 auto;
      padding:0 16px;
      width:100%;
      display:flex;
      align-items:center;
      gap:14px;
    }

    .brand{
      font-weight:700;
      letter-spacing:.3px;
      display:flex;
      align-items:center;
      gap:10px;
    }

    .brand__dot{
      width:28px;
      height:28px;
      border-radius:10px;
      background:rgba(255,255,255,.2);
      display:grid;
      place-items:center;
      border:1px solid rgba(255,255,255,.3);
    }

    /* Main body */
    main{
      flex:1;
      display:grid;
      place-items:center;
      padding:24px;
      text-align:center;
    }

    .error-code{
      font-size: clamp(45px, 9vw, 96px);
      font-weight:300;
      letter-spacing:.5px;
      color:rgba(233,237,243,.45);
      margin:0;
    }

    /* Footer */
    footer{
      max-width:1100px;
      margin: 18px auto 0;
      padding: 16px 16px 26px;
      color: rgba(233,237,243,.55);
      display:flex;
      flex-wrap:wrap;
      justify-content:space-between;
      gap: 10px;
      border-top: 1px solid rgba(255,255,255,.07);
    }

    footer a{
      color: rgba(233,237,243,.65);
      text-decoration:none;
      border-bottom: 1px dashed rgba(233,237,243,.25);
    }

    footer a:hover{
      border-bottom-color: rgba(122,162,255,.55);
    }
  </style>
</head>

<body>

  <header class="topbar">
    <div class="topbar__inner">
      <div class="brand">
        <div class="brand__dot">A</div>
        <span>Aadya</span>
      </div>
    </div>
  </header>

  <main>
    <h1 class="error-code">404<br>Page not found</h1>
  </main>

  <footer role="contentinfo">
    <div>
      Copyleft © 2024–2025 •
      <a href="https://www.aadya.tech/code-of-conduct">Code of Conduct</a> •
      <a href="https://www.aadya.tech/privacy-policy">Privacy Policy</a>
    </div>
    <div>Made with ♥ by wisetux</div>
  </footer>

</body>
</html>
