.background {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;

    width: 100vw;
    height: 100vh;

    will-change: transform;
    backface-visibility: hidden;

    background-image: url(/resources/background.png);
    /* background-color: deepskyblue; */
    background-color: #15b5ea;
}

.bg-acc {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.bg-fill {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(180deg, #ffffff6e, transparent); */
    /* clip-path: polygon(0 0, 0 0, 100% 0, 100% 55%, 86% 55%, 74% 70%, 52% 70%, 40% 84%, 0 84%); */
    z-index: 1;
    mix-blend-mode: color;
}

.bg-scanlines {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.bg-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 40%, rgb(120 119 222 / 40%) 100%);
    pointer-events: none;
    z-index: 3;
}