body.login {
    background:
        radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.98) 0 34%, rgba(239,246,253,.9) 68%, rgba(255,255,255,.98) 100%),
        #f7f9fc;
    color: #203556;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.login::before,
body.login::after {
    content: "";
    position: fixed;
    left: -10%;
    width: 120%;
    height: 180px;
    border: 28px solid rgba(31, 99, 191, .07);
    border-left: 0;
    border-right: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}

body.login::before { top: 30%; transform: rotate(10deg); }
body.login::after { top: 48%; border-color: rgba(50, 163, 71, .07); transform: rotate(8deg); }

#login {
    width: min(100% - 32px, 676px);
    padding: 42px 0 34px;
}

#login h1 a {
    width: 242px;
    height: 242px;
    margin: 0 auto 34px;
    background-size: contain;
    background-position: center;
}

#login .message,
#login #login_error {
    border-left: 6px solid #1765d1;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(32, 53, 86, .10);
    padding: 28px 34px 28px 144px;
    margin: 0 0 20px;
    font-size: 18px;
    line-height: 1.55;
    background: rgba(255,255,255,.96);
}

#login .message::before {
    content: "🔒";
    float: left;
    margin-left: -94px;
    font-size: 42px;
    line-height: 1;
}

#loginform {
    margin-top: 0;
    padding: 34px 40px 40px;
    border: 0;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(32, 53, 86, .10);
    background: rgba(255,255,255,.98);
}

#loginform label {
    color: #29466e;
    font-size: 17px;
    font-weight: 600;
}

#loginform input[type="text"],
#loginform input[type="email"] {
    min-height: 54px;
    margin-top: 8px;
    border: 2px solid #1765d1;
    border-radius: 8px;
    box-shadow: none;
    font-size: 18px;
}

#loginform input[type="submit"] {
    width: 100%;
    min-height: 56px;
    margin-top: 22px;
    border: 0;
    border-radius: 8px;
    background: #1765d1;
    font-size: 18px;
    font-weight: 700;
}

#loginform input[type="submit"]:hover,
#loginform input[type="submit"]:focus { background: #0e4fa9; }

#nav,
#backtoblog {
    margin: 28px 0 0;
    padding: 0;
    font-size: 17px;
}

#nav a,
#backtoblog a { color: #1765d1; font-weight: 600; }

.language-switcher {
    margin-top: 34px;
    padding: 0;
    background: transparent;
}

.language-switcher select {
    min-height: 48px;
    border: 1px solid #cbd7e7;
    border-radius: 8px;
}

@media (max-width: 520px) {
    #login { width: min(100% - 24px, 676px); padding-top: 26px; }
    #login h1 a { width: 180px; height: 180px; margin-bottom: 24px; }
    #login .message,
    #login #login_error { padding: 22px 22px 22px 92px; font-size: 16px; }
    #loginform { padding: 26px 22px 30px; }
}