html, body {
    background: transparent !important;
}

.wrapper, .page, .container, main, #content {
    background: transparent !important;
}

html::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -9999;
    background: linear-gradient(
        to bottom,
        #e40303 0%,
        #e40303 16.66%,
        #ff8c00 16.66%,
        #ff8c00 33.33%,
        #ffed00 33.33%,
        #ffed00 50%,
        #008026 50%,
        #008026 66.66%,
        #24408e 66.66%,
        #24408e 83.33%,
        #732982 83.33%,
        #732982 100%
    );
    pointer-events: none;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: linear-gradient(
        to bottom,
        #e40303 0%,
        #e40303 16.66%,
        #ff8c00 16.66%,
        #ff8c00 33.33%,
        #ffed00 33.33%,
        #ffed00 50%,
        #008026 50%,
        #008026 66.66%,
        #24408e 66.66%,
        #24408e 83.33%,
        #732982 83.33%,
        #732982 100%
    );
    pointer-events: none;
}

body.lgbt-visible::before {
    opacity: 0.3;
}

body.lgbt-visible-medium::before {
    opacity: 0.5;
}

body.lgbt-visible-full::before {
    opacity: 0.7;
}