#login {
    padding: 100px 50px;
    
    align-items: center;
}

#login .title {
    text-align: center;
}

#sso-buttons {
    margin-top: 20px;

    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 40px;
}

.sso-button {
    width: 150px;
    height: 100px;
}

#login-separator {
    width: 100px;
    height: 3px;
    
    margin: 50px 0;

    background: rgba(var(--dark-color-rgb), 0.1);

    border-radius: 500px;
}

#login-form {
    width: 100%;
    max-width: 500px;
    
    margin-top: 20px;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.login-form-spacer {
    width: 100%;
    height: 50px;
}

#remember-checkbox {
    align-self: flex-end;
}

.login-form-row {
    width: 100%;
    
    margin-top: 20px;
    
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

@media only screen and (max-width: 800px) {
    #login {
        padding: 50px;
    }
}

@media only screen and (max-width: 700px) {
    #login {
        padding: 20px;
    }
}

@media only screen and (max-width: 500px) {
    #login-buttons {
        flex-direction: column;
    }

    .sso-button {
        width: 100%;
        height: 100px;
    }
}