background.css

#bg-wrapper {
    background-color: rgb(222, 222, 222);
    background-blend-mode: color-burn;
}
#bg-wrapper.dark-mode {
    background-color: rgb(0, 0, 0);
    background-blend-mode: color-dodge;
}
#bg-img {
    background-blend-mode: overlay;
    background-image: url("../img/bg.png");
    background-attachment: fixed;
}
#bg-img.dark-mode {
    background-blend-mode: difference;
    background-image: url("../img/bginvert.png");
    background-attachment: fixed;
}
#bg-wrapper2 {
    background-blend-mode: color-burn;
    backdrop-filter: contrast(155%) saturate(250%);
    background: linear-gradient(to bottom, 
    rgba(128, 128, 128, .5) 0%,
    rgba(128, 128, 128, .05) 50%,
    rgba(128, 128, 128, .5) 100%);
}
#bg-wrapper3 {
    opacity: .5;
    background-blend-mode: saturation;
    backdrop-filter: contrast(150%) saturate(350%);
    background: linear-gradient(to right, 
    rgba(128, 128, 128, .5) 0%,
    rgba(128, 128, 128, .3) 15%,
    rgba(128, 128, 128, .05) 50%,
    rgba(128, 128, 128, .3) 85%,
    rgba(128, 128, 128, .5) 100%);
}
#bg {
    opacity: .33;
    mix-blend-mode: color;
}
#shift-layer1 {
    mix-blend-mode: difference;
}
#shift-layer2 {
    mix-blend-mode: overlay;
}
#bg-wrapper, #bg-wrapper.dark-mode, #bg-img.dark-mode, #bg-img, #bg-wrapper2, #bg-wrapper3, #bg, #shift-layer1, #shift-layer2 {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    border-radius:0;
}
#bg-frame-top {
    position:fixed;
    z-index: 1000;
    top:0;
    left: 0;
    border-radius:0;
    width: 100%;
    height: 2.2%;
    background: linear-gradient(to bottom, 
    rgba(128, 128, 128, .65) 0%,
    rgba(128, 128, 128, 0) 100%);
    mix-blend-mode: color-burn;
}
#bg-frame-right {
    position:fixed;
    z-index: 1000;
    top:0;
    right: 0;
    border-radius:0;
    width: 1.5%;
    height: 100%;
    background: linear-gradient(to left, 
    rgba(128, 128, 128, .55) 0%,
    rgba(128, 128, 128, 0) 100%);
    mix-blend-mode: color-burn;
}
#bg-frame-bottom {
    position:fixed;
    z-index: 1000;
    bottom:0;
    left: 0;
    border-radius:0;
    width: 100%;
    height: 2.5%;
    background: linear-gradient(to top, 
    rgba(128, 128, 128, 1) 0%,
    rgba(128, 128, 128, 0.05) 100%);
    mix-blend-mode: color-burn;
}
#bg-frame-left {
    position:fixed;
    z-index: 1000;
    top:0;
    left: 0;
    border-radius:0;
    width: 1.5%;
    height: 100%;
    background: linear-gradient(to right, 
    rgba(128, 128, 128, .55) 0%,
    rgba(128, 128, 128, 0) 100%);
    mix-blend-mode: color-burn;
}