:root {
    --keycloak-card-top-color: var(--hpi-orange);
}

.login-pf body {
    background-color: var(--pf-v5-c-login__main--BackgroundColor);
    background-image: url('../img/background.svg');
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: 0;
    background-attachment: scroll;
    background-size: 3840px 2160px;
}

.login-pf-page {
    padding-bottom: 20px;
    padding-top: 30px;
}

#login-logo {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 300px;
}

#kc-header {
    width: 100%;
    padding-top: 1vh;
    padding-bottom: 1vh;
    background: transparent none;
    border: none;
}

main {
    margin-block-end: 0 !important;
}

#login-footer {
    /* 300 is only defined in dark mode, 200 is fine for light mode, but not dark */
    background-color: var(--pf-v5-global--BackgroundColor--300, var(--pf-v5-global--BackgroundColor--200));
    text-align: center;
    font-size: 10px;
    padding: 10px;
    box-shadow: var(--pf-v5-c-login__main--BoxShadow);
}

#login-footer a {
    padding: 0px 5px;
}

@media(max-height: 900px) {
    #login-logo {
        width: 200px;
    }
}

@media(max-height: 670px) {
    #login-logo {
        width: 150px;
    }

    /* make sure the header has enough space to the login card */
    .login-pf-page .login-pf-page-header {
        margin-bottom: 20px;
    }
}

/*
767 is the breakpoint when Keycloak displays the mobile friendly view.
*/
@media(max-width: 767px) {
    .login-pf body {
        background-image: none;
    }

    /* make sure the whole page has some padding top on mobile devices */
    .login-pf-page {
        padding-top: 20px;
    }

    /* This makes sure that devices that define a safe-area-inset get the paddng value they want.
       For example, we don't interfere with the newer iPhones notches anymore. */
    @supports(padding:max(0px)) {
        .login-pf-page {
            padding-top: max(env(safe-area-inset-top), 20px);
        }
    }

    #login-footer {
        background-color: transparent;
    }
}