Untitled

<!doctype html>
<html>
    <head>
        <title>Hacking Game</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <style>
            body{
                height: 100%;
                width: 95%;
                overflow: hidden;
                background-color: #191919;
            }
            div.login{
                background-color: aliceblue;
                background-repeat: no-repeat;
                position: absolute;
                width: 450px;
                height: 500px;
                top: 15%;
                bottom: 15%;
                left: 35%;
                border-bottom-left-radius: 25px;
                border-bottom-right-radius: 25px;
            }
            input#username{
                position: absolute;
                background-color: dimgray;
                font-style: oblique;
                color: white;
                text-align: center;
                border-color: black;
                border-style: outset;
                left: 33%;
                top: 75%;
            }
            input#password{
                position: absolute;
                background-color: dimgray;
                font-style: oblique;
                color: white;
                text-align: center;
                border-color: black;
                border-style: outset;
                left: 33%;
                top: 80%;
            }
            input#loginbutton{
                position: absolute;
                background-color: dimgray;
                font-style: oblique;
                color: white;
                text-align: center;
                border-color: black;
                border-style: outset;
                left: 33%;
                width: 36%;
                top: 85%;
            }
            div.title{
                border-top-left-radius: 25px;
                border-top-right-radius: 25px;
                color: black;
                width: 450px;
                height: 50px;
                border-bottom-style: solid;
                border-bottom-color: black;
                border-bottom-width: 2.5px;
                left: 35%;
                position: absolute;
                top: 8%;
                z-index: 1;
                background-color: aqua;
                margin: none;
                padding: none;
            }
            p.titletext{
                position: absolute;
                left: 35%;
                margin-top: 0.1px;
                border: none;
                font-family: arial;
                font-size: 3vw;
            }
            div.loginimage{
                width: 290px;
                height: 290px;
                background-image: url(loginimg.png);
                background-color: aliceblue;
                background-repeat: no-repeat;
                left: 35%;
                background-size: 50% 50%;
                position: absolute;
                top: 25%;
            }
        </style>
        <script>
            $(document).ready(function(){
                var username = "root"
                var password = "toor"
            });
        </script>
    </head>
    <body>
        <div class="title">
            <p class="titletext">HackOS</p>
        </div>
        <div class="login">
            <div class="loginimage"></div>
            <input type="text" placeholder="root" id="username" class="loginparam" /><br>
            <input type="password" placeholder="toor" id="password" class="loginparam" /><br>
            <input type="button" value="login" id="loginbutton" class="loginbutton" />
        </div>
    </body>
</html>