@font-face {
            font-family: comicsns;
            src: url('/comic.ttf');
        }

        body {
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
            background-image: url(bg.png);
            color: white;
            font-family: 'comicsns';
            align-items: center;
            align-self: center;
            text-align: center;
            text-shadow: 0px 8px 8px black;
        }

        .normalbutton {
            color: #ffffff;
            background-image: linear-gradient(#8b0069, #9b0079);
            font-size: 44px;
            border-radius: 8px;
            border-style: none;
            width: 100%;
            padding: 5px 5px;
            cursor: pointer;
            font-family: 'comicsns';
            box-shadow: 0px -3px 8px #000000;
            transition: 0.3s ease-out;
        }

        .navbutton {
            color: #ffffff;
            background-color: #30303000;
            border-radius: 4px;
            border-style: none;
            width: 100%;
            padding: 5px 15px;
            cursor: pointer;
            font-family: 'comicsns';
            box-shadow: 0px -3px 8px #000000;
            transition: 0.3s ease-out;
            margin: 2px;
        }

        .normalbutton:hover {
            text-shadow: 0px 0px 4px #000000;
            box-shadow: 0px -3px 8px #ffffff;
            color: black;
            background-image: linear-gradient(#ffffff, #ffffff);
            transform: scale(1.05, 1);
            transition: 0.3s ease-out;
        }

        .navbutton:hover {
            text-shadow: 0px 0px 4px #000000;
            box-shadow: 0px -3px 8px #ffffff;
            color: black;
            background-image: linear-gradient(#ffffff, #ffffff);
            transform: scale(1, 1.1);
            transition: 0.3s ease-out;
        }

        .navbutton:disabled {
            color: #ff0000;
            background-image: linear-gradient(#00000080, #00000080);
            border-radius: 4px;
            border-style: none;
            width: 100%;
            padding: 5px 15px;
            cursor: default;
            font-family: 'comicsns';
            box-shadow: 0px -3px 8px #ff0000;
        }

        .navbar {
            list-style-type: none;
            background-color: #00000080;
            padding: 10px 10px;
            overflow: hidden;
            margin: 0%;
        }

        input {
            border-radius: 4px;
            border-style:solid;
            padding: 10px;
            color: rgb(255, 255, 255);
            border-width: 1px;
            border-color: #00000085;
            background-color: #00000046;
            box-shadow: 0px 0px 4px black;
        }

        .navbar-left {
            float: left;
        }

        .navbar-left-label {
            float: left;
            margin: 4px;
        }

        .icon-round {
            border-radius: 2px;
            width: 16px;
            vertical-align: middle;
        }

        .navbar-right {
            float: right;
        }

        .navbar-center {
            float: none;
        }

        .navlogo {
            height: 30px;
        }

        .imgbox {
            display: grid;
            height: 30%;
        }

        .maincontainer {
            display: flex;
            text-align: center;
            margin: 0 auto;
            height: 100%;
            width: 90%;
            color: #ffffff;
            background-image: linear-gradient(#ff00aa, #ff00ff);
            font-size: 24px;
            border-radius: 100px;
            border-style: none;
            padding: 5px 10px;
            align-items: center;
            align-self: center;
            box-shadow: 0px 5px 11px #ff00ff;
        }

        .gamecontainer {
            display: grid;
            text-align: center;
            margin: 0 auto;
            height: 50%;
            width: 75%;
            color: #ffffff;
            background-color: #00000081;
            font-size: 24px;
            border-radius: 8px;
            border-style: none;
            padding: 5px 10px;
            align-items: center;
            align-self: center;
            box-shadow: 0px 5px 11px #000000;
        }
        
        .registercontainer {
            display:flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 95vh;
            width: 100%;
            margin: 0;
        }

        .registerform {
            text-align: center;
            color: #ffffff;
            background-color: #00000081;
            border-radius: 8px;
            border-style: none;
            padding: 20px;
            align-items: center;
            align-self: center;
            box-shadow: 0px 5px 11px #000000;
        }

        .submitbtn {
            border-radius: 4px;
            border-style:solid;
            font-family: 'comicsns';
            width: 100%;
            padding: 10px;
            color: rgb(255, 255, 255);
            border-width: 1px;
            border-color: #00000085;
            background-color: #61004146;
            box-shadow: 0px 0px 4px black;
            transition: 0.3s ease-out;
        }

        .submitbtn:disabled {
            border-radius: 4px;
            border-style:solid;
            font-family: 'comicsns';
            width: 100%;
            padding: 10px;
            color: rgb(255, 255, 255);
            border-width: 1px;
            border-color: #00000085;
            background-color: #310021bb;
            box-shadow: 0px 0px 0px black;
            transition: 0.3s ease-out;
        }

        .submitbtn:disabled:hover {
            border-radius: 4px;
            border-style:solid;
            font-family: 'comicsns';
            width: 100%;
            padding: 10px;
            color: rgb(255, 255, 255);
            border-width: 1px;
            border-color: #00000085;
            background-color: #310021bb;
            box-shadow: 0px 0px 0px black;
            cursor: not-allowed;
            transition: 0.3s ease-out;
        }

        .submitbtn:hover {
            text-shadow: 0px 0px 4px #000000;
            box-shadow: 0px -3px 8px #ffffff;
            color: black;
            background-image: linear-gradient(#ffffff, #ffffff);
            transform: scale(1, 1.1);
            transition: 0.3s ease-out;
            cursor: pointer;
        }

        .center-fit {
            max-width: 30%;
            max-height: 30vh;
            margin: auto;
        }

        ul {
            color: white;
            font-family: 'comicsns';
            background-color: #770045ea;
            box-shadow: 0px 0px 8px #000000;
        }


        hr {
            border-color: white;
            box-shadow: 0px 0px 8px #000000;
        }

        .navbuttons {
            margin: 0 auto;
            height: 100%;
            width: 50%;
            display: flex;
            flex-direction: row;
            align-self: center;
            align-items: center;
            justify-content: center;
        }