.login-page {
    min-height: 100vh;
    --navy: #0f2a47;
    --pink: #fb5b8c;
    --coral: #ff7f46;
    --aqua: #55bdbb;
    font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 14% 18%, rgba(85, 189, 187, .2), transparent 25%),
        radial-gradient(circle at 88% 16%, rgba(251, 91, 140, .2), transparent 28%),
        linear-gradient(145deg, #f7fbfd, #fff4f7);
}

.login-simple {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.login-card {
    width: min(440px, 100%);
    padding: 38px;
    border-top: 5px solid var(--pink);
    box-shadow: 0 28px 70px rgba(15, 42, 71, .14);
}

.login-form {
    width: 100%;
}

.login-form > .brand {
    margin-bottom: 8px;
    padding: 0;
}

.login-form h2 {
    margin-bottom: 0;
    color: var(--navy);
}

.login-page .brand-mark {
    position: relative;
    border-radius: 48% 52% 54% 46%;
    background: linear-gradient(145deg, var(--pink), var(--coral));
    box-shadow: 0 9px 24px rgba(251, 91, 140, .28);
    font-family: Poppins, sans-serif;
}

.login-page .brand-mark::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 6px;
    right: 6px;
    top: -3px;
    border-radius: 90% 10% 90% 10%;
    background: var(--aqua);
    transform: rotate(-24deg);
}

.login-page .button.primary {
    background: linear-gradient(135deg, var(--pink), #ee4f80);
    box-shadow: 0 9px 22px rgba(251, 91, 140, .25);
}

.login-page input:focus {
    border-color: var(--pink);
    box-shadow: 0 0 0 3px rgba(251, 91, 140, .12);
}

@media (max-width: 520px) {
    .login-simple {
        padding: 16px;
    }

    .login-card {
        padding: 28px 24px;
    }
}