:root {
    --login-primary: #176b73;
    --login-accent: #e98b73;
    --login-background: #f7f5f0;
    --login-text: #17252a;
}

html,
body {
    min-height: 100%;
}

body.login-page {
    min-height: 100vh;
    color: var(--login-text);
    background-color: var(--login-primary);
    background-image:
        linear-gradient(rgba(23, 37, 42, 0.18), rgba(23, 37, 42, 0.18)),
        url("../images/see-und-berge.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.login-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
}

.login-shell > .row {
    width: 100%;
}

.login-card {
    overflow: hidden;
    background-color: rgba(247, 245, 240, 0.93);
    border-radius: 1rem;
    box-shadow: 0 0.75rem 2rem rgba(23, 37, 42, 0.2);
    backdrop-filter: blur(4px);
}

.login-heading {
    color: var(--login-primary);
}

.login-page .form-control:focus {
    border-color: var(--login-primary);
    box-shadow: 0 0 0 0.25rem rgba(23, 107, 115, 0.25);
}

.login-page .btn-primary {
    --bs-btn-bg: var(--login-primary);
    --bs-btn-border-color: var(--login-primary);
    --bs-btn-hover-bg: #12565d;
    --bs-btn-hover-border-color: #12565d;
    --bs-btn-active-bg: #0f484e;
    --bs-btn-active-border-color: #0f484e;
}

.login-page a {
    color: var(--login-primary);
}

.login-page a:focus-visible,
.login-page button:focus-visible,
.login-page input:focus-visible {
    outline: 0.2rem solid var(--login-accent);
    outline-offset: 0.15rem;
}

@media (max-width: 575.98px) {
    body.login-page {
        background-position: 58% center;
    }

    .login-shell {
        padding: 1rem;
    }

    .login-card {
        background-color: rgba(247, 245, 240, 0.97);
    }
}