<!DOCTYPE html>
<html>
    <head>
        <meta charsets="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-COMPATIBLE" content="ie-edge">
        <title>AlphaStudioz</title>
    </head>

    <body>
        <nav>
            <div>
                <div class="logo">
                    <h4>AlphaStudioz</h4>
                </div>
                <ul class="buttons">
                    <a href="#">
                        <button class="btn">Home</button>
                    </a>
                    <a href="/about">
                        <button class="btn">About</button>
                    </a>
                    <a href="/discord">
                        <button class="discord">Discord</button>
                    </a>
                    <a href="github">
                        <button class="btn">Github</button>
                    </a>
                </ul>
            </div>
        </nav>
        <div class="message">
            <h1>Error 404</h1>
        </div>
        <p text-align="">Not sure how you got here... But this page does not exist 0_o</p>
    </body>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        nav {
            display: flex;
            justify-content: space-around;
            align-items: center;
            min-height: 8vh;
            background-color: black;
            font-family: Georgia, 'Times New Roman', Times, serif;
        }
        .logo {
            color: white;
            text-transform: uppercase;
            letter-spacing: 5px;
            font-size: 20px;
        }
        .btn {
            background-color: cyan;
            color: white;
            font-size: 15px;
            transition-duration: 0.5s;
            border: 2px solid;
            border-radius: 8px;
            font-family: sans-serif;
        }
        .btn:hover {
            background-color: red;
        }
        .discord {
            background-attachment: var();
            color: white;
            font-size: 15px;
            transition-duration: 0.5s;
            border: 2px solid;
            border-radius: 8px;
            font-family: sans-serif;
        }
        .discord:hover {
            background-color: blue;
        }
        body {
            background-color: grey;
        }
        .message {
            margin-top: 25%;
            margin-left: 50%;
            margin-right: 50%;
        }
    </style>
</html>