body.task-login #layout-content,
html.dark-mode body.task-login #layout-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    justify-content: safe center;
    overflow: auto;
    box-sizing: border-box;
    padding: 2rem 1rem;
    background: linear-gradient(155deg, rgba(7, 35, 56, .14), rgba(4, 35, 52, .32)),
        url("mare.jpg") center center / cover no-repeat #12445b;
}

body.task-login #layout-content > #logo {
    display: none;
}

body.task-login #layout-content > #login-form {
    top: auto;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 100%;
    max-width: 26rem;
    margin: 0;
    padding: clamp(1.1rem, 4vw, 2rem);
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 1.25rem;
    background-color: rgba(250, 253, 255, .96);
    box-shadow: 0 1rem 3rem rgba(3, 30, 48, .28);
}

body.task-login #rcmloginsubmit {
    border-color: #0b5871;
    background-color: #0b5871;
    color: #fff;
}

body.task-login #rcmloginsubmit:hover,
body.task-login #rcmloginsubmit:focus-visible {
    border-color: #08465b;
    background-color: #08465b;
}

html.dark-mode body.task-login #layout-content > #login-form {
    border-color: rgba(210, 238, 251, .3);
    background-color: rgba(19, 41, 53, .97);
}