body.task-login {
    background:
        linear-gradient(
            90deg,
            rgba(31, 43, 47, 0.00) 0%,
            rgba(31, 43, 47, 0.04) 30%,
            rgba(31, 43, 47, 0.08) 48%,
            rgba(31, 43, 47, 0.15) 100%
        ),
        url("../images/roundcubebackground.webp") center center / cover no-repeat fixed;
}

body.task-login #layout-content {
/*    background: rgba(31, 43, 47, 0.72);*/
    border: 1px solid rgba(125, 211, 252, 0.30);
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.50);
    padding: 2rem;
}
/* Remove this for now; it can make the whole area feel smeared depending on stacking */
body.task-login #layout-content {
    backdrop-filter: none;
}

body.task-login #logo {
    max-width: 96px;
    height: auto;
    filter:
        drop-shadow(0 0 12px rgba(56, 199, 255, 0.35))
        drop-shadow(0 10px 28px rgba(0, 0, 0, 0.45));
}