body {
            background-image: url("Baum.png");
        }

        .username {
            display: grid;
            place-items: center;
        }

        #username { 
            height: 25px;
            width: 170px;
            position: fixed;
            left: 45%;
            top: 50%;
            border: 2px solid #000000;
            border-radius: 10px;
            text-indent: 10px;
            padding-left: 20px;
       }

       #password {
            height: 25px;
            width: 170px;
            position: fixed;
            left: 45%;
            top: 55%;
            border: 2px solid #000000;
            border-radius: 10px;
            text-indent: 10px;
            padding-left: 20px;
       }

        #loginBtn {
            position: fixed;
            left: 52%;
            top: 60%;
            padding:5px 20px;
            border: 1px solid #0e636e;
            border-radius: 10px;
            color: #fff4ec;
            box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2), 0px -2px 2px rgba(255, 255, 255, 0.5) inset, 0 2px 2px rgba(255, 255, 255, 0.8) inset;
            background: linear-gradient(#7e3c0d, #5a2b09);
            text-shadow: 0 -2px #2a1404;
        }
               
        #loginBtn:hover {
            position: fixed;
            padding:5px 20px;
            border: 1px solid #0e636e;
            border-radius: 10px;
            color: #fadfcc;
            box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2), 0px -2px 2px rgba(255, 255, 255, 0.5) inset, 0 2px 2px rgba(255, 255, 255, 0.8) inset;
            background: linear-gradient(#c7621a, #7e3c0d);
            text-shadow: 0 -2px #2a1404;
        }

        #loginBtn:active {
            position: fixed;
            padding:5px 20px;
            border: 1px solid #0e636e;
            border-radius: 10px;
            color: #fadfcc;
            box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2), 0px -2px 2px rgba(255, 255, 255, 0.5) inset, 0 2px 2px rgba(255, 255, 255, 0.8) inset;
            background: linear-gradient(#cc8e62, #6d503c);
            text-shadow: 0 -2px #2a1404;
        }

        #cancel {
            position: fixed;
            left: 45%;
            top: 60%;
            padding:5px 20px;
            border: 1px solid #0e636e;
            border-radius: 10px;
            color: #fff4ec;
            box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2), 0px -2px 2px rgba(255, 255, 255, 0.5) inset, 0 2px 2px rgba(255, 255, 255, 0.8) inset;
            background: linear-gradient(#7e3c0d, #5a2b09);
            text-shadow: 0 -2px #2a1404;
        }

        #cancel:hover { 
            position: fixed;
            padding:5px 20px;
            border: 1px solid #0e636e;
            border-radius: 10px;
            color: #fadfcc;
            box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2), 0px -2px 2px rgba(255, 255, 255, 0.5) inset, 0 2px 2px rgba(255, 255, 255, 0.8) inset;
            background: linear-gradient(#c7621a, #7e3c0d);
            text-shadow: 0 -2px #2a1404;
        }

        #cancel:active {
            position: fixed;
            padding:5px 20px;
            border: 1px solid #0e636e;
            border-radius: 10px;
            color: #fadfcc;
            box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2), 0px -2px 2px rgba(255, 255, 255, 0.5) inset, 0 2px 2px rgba(255, 255, 255, 0.8) inset;
            background: linear-gradient(#cc8e62, #6d503c);
            text-shadow: 0 -2px #2a1404;
        }
        #error-message {
           position: absolute;
           top: 2%;
           left: 32%;
           padding: 50px;
           border: #c7621a solid 1px;
           border-radius: 20px;
           display:none;
           color:red;
           font-weight:bold;
           margin-top:10px
        }