.loginForm{
    width: 500px;
    display: flex;
    margin: auto;
    background-color: var(--fade);
    border: var(--windowBorder);
    border-radius: 15px;
    color: white;
    text-align: center;
    transition: var(--transition);
    opacity: 0;
    animation: fadeIn 0.3s forwards;
}

.loginForm>*{
    width: 100%;
}

.loginForm div{
    margin: 20px;
    margin-left: auto;
    margin-right: auto;
}

.loginForm img{
    max-width: 50px;
}

.loginForm input{
    width: 80%;
    text-align: center;
}

.loginFormIcon{
    animation: rotateWithPause 10s 10s infinite ease;
}

.loginFormUsername{
    opacity: 0;
    animation: fadeIn .5s .1s forwards;
}

.loginFormPasswd{
    opacity: 0;
    animation: fadeIn .5s .2s forwards;
}

.loginForm button{
    width: 80%;
}

.loginFormSubmit{
    display: none;
    opacity: 0;
}

.loginFormHelp{
    opacity: 0;
    cursor: pointer;
    animation: fadeIn .5s .3s forwards;
    transition: all 0.2s ease-in-out;
}

.loginFormHelp:hover{
    scale: 1.05;
    transition: all 0.2s ease-in-out;
}

@keyframes rotateWithPause {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    10%, 100% {
        /* Pause at the end */
        transform: rotate(360deg);
    }
}