style.css

#wrapper {
    width: 35vw;
    margin: 2em auto;
}

#footer {
    position: relative;
    bottom: 0;
    top: 10em;
    left: 50%;
}

p {
    text-align: center;
    position: relative;
    left: -50%
}

#username {
    border: 0;
}

#username:hover {
    border-bottom: 1px grey;
}

#resetApp:hover {
    text-decoration: underline;
    cursor: pointer;
    color: red;
}

input[id="username"] {
    width: 30%;
}

span.p-centered {
    margin-right: -40px;
}

#message {
    visibility: visible;
    height: 3em;
}

.input_shake {
    animation: kf_shake 0.4s 1 linear;
}

@keyframes kf_shake {
    0% { -webkit-transform: translate(30px); }
    20% { -webkit-transform: translate(-30px); }
    40% { -webkit-transform: translate(15px); }
    60% { -webkit-transform: translate(-15px); }
    80% { -webkit-transform: translate(8px); }
    100% { -webkit-transform: translate(0px); }
}


@media screen and (max-width: 780px) {
    * {
        font-size: small;
    }

    #wrapper {
        width: 80vw; 
        margin: 3em auto;
    }

    input[id="username"] {
        width: 25%;
        font-size: smaller;
    }

    span.p-centered {
        margin-right: -10px;
    }

    #footer {
        position: relative;
        bottom: 0;
        top: 5em;
        left: 50%;
    }
    

}