html {
    min-height: 100%;
    background: #000 !important;
}

body {
    position: relative;
    min-height: 100vh;
    background: transparent !important;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background:
        url("/kwx-assets/authelia-wallpaper.png")
        center center / cover no-repeat;

    filter: brightness(0.86) saturate(1.08);
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.10) 0%,
            rgba(0, 0, 0, 0.38) 32%,
            rgba(0, 0, 0, 0.76) 50%,
            rgba(0, 0, 0, 0.38) 68%,
            rgba(0, 0, 0, 0.10) 100%
        );
}

#root {
    position: relative !important;
    z-index: 1 !important;
    min-height: 100vh !important;
    background: transparent !important;
}

#root > div,
#root main {
    background-color: transparent !important;
}

button {
    box-shadow: 0 0 20px rgba(34, 140, 255, 0.24) !important;
}