:root {
    --keycloak-bg-logo-url: url(../img/login-bg-1280px.avif)
}

@media (min-width: 1920px) {
    :root {
        --keycloak-bg-logo-url: url(../img/login-bg-1920px.avif)
    }
}

@media (min-width: 2560px) {
    :root {
        --keycloak-bg-logo-url: url(../img/login-bg-2560px.avif)
    }
}

@media (min-width: 3840px) {
    :root {
        --keycloak-bg-logo-url: url(../img/login-bg-3840px.avif)
    }
}

@media (prefers-color-scheme: dark) {
    .login-pf #keycloak-bg {
        backdrop-filter: brightness(80%);
    }
}

.login-pf #kc-header-wrapper.pf-v5-c-brand {
    height: 40px;
    user-select: none;
    position: relative;
    color: transparent;
    font-size: 0px;
}

.login-pf #kc-header-wrapper.pf-v5-c-brand:after {
    content: "";
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    position: absolute;
    background-image: url(../img/logo.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, .5)) drop-shadow(0px 0px 5px #000);
}