:root {
    --pf-global--primary-color--100: #d776af;
    --pf-global--primary-color--200: #a30262;
}

.login-pf body {
    /* suppress default background */
    background: none;
}

/* https://www.sitepoint.com/css3-transform-background-image/ */
.login-pf body::before {
    content: "";
    position: fixed;
    transform: rotate(30deg);
    /* hack: will wind up looking funny at very-not-square aspect ratios */
    width: 400%;
    height: 400%;
    top: -100%;
    left: -100%;

    z-index: -1;
    filter: blur(12px) brightness(0.7);
    background: url("../img/logo.svg") repeat center center fixed;
    background-color: #63216d;
    background-size: 15em;
}

#kc-header {
    margin-top: 100px;
    margin-bottom: 50px;
}

#kc-header-wrapper {
    /* horrible, this is a div, lol */
    display: inline;
    background-color: #a30262;
    color: #ddd;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 0.5em;
}