/* Default for mobile */

#loginContainer {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
}

#loginForm > * {
    width: 100%;
}

#loginTitle,#loginSubtitle {
    text-align: center;
}

#loginSubmitArea {
    margin-top: var(--space-general);
}

/* For tablets */
@media only screen and (min-width: 600px) {
    #loginContainer {
        width: 300px;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

/* For desktops: */
@media only screen and (min-width: 900px) {
    #loginContainer {
        width: 300px;
    }
}