background.css

#bg-wrapper {position: sticky;
    top:0;
    width: 100%;
    height: 100vh;
    margin-top:-100vh;
    background-color: rgb(222, 222, 222);
    background-image: url("/img/bg.png");
    background-blend-mode: luminosity;
    background-attachment: fixed;
    border-radius:0;}
#bg-wrapper.dark-mode {position: sticky;
    top:0;
    width: 100%;
    height: 100vh;
    margin-top:-100vh;
    background-color: rgb(0, 0, 0);
    background-image: url("/img/bginvert.png");
    background-blend-mode: difference;
    background-attachment: fixed;
    border-radius:0;}
#bg-wrapper2 {position: relative;
    top:0;
    width: 100%;
    height: 100vh;
    background-blend-mode: saturation;
    backdrop-filter: contrast(150%) saturate(350%);
    margin-top:-100vh;
    background: linear-gradient(to bottom, 
    rgba(128, 128, 128, .5) 0%,
    rgba(128, 128, 128, 0) 50%,
    rgba(128, 128, 128, .5) 100%);
    border-radius:0;}
#bg-wrapper3 {position: relative;
    opacity: .5;
    top:0;
    width: 100%;
    height: 100vh;
    background-blend-mode: saturation;
    backdrop-filter: contrast(150%) saturate(350%);
    margin-top:-100vh;
    background: linear-gradient(to right, 
    rgba(128, 128, 128, .5) 0%,
    rgba(128, 128, 128, .3) 15%,
    rgba(128, 128, 128, 0) 50%,
    rgba(128, 128, 128, .3) 85%,
    rgba(128, 128, 128, .5) 100%);
    border-radius:0;}
#bg {position: absolute;
    top: 0;
    left: 0;
    opacity: .33;
    border-radius:0;
    mix-blend-mode: color;
}
#box, #overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}
#box {
    mix-blend-mode: difference;
}
#overlay {
    mix-blend-mode: overlay;
}