.page-background {
    width: 100%;
    height: 100dvh;
    position: fixed;
    z-index: -1;
    background: linear-gradient(0deg, var(--page-background1), var(--page-background2), var(--page-background3), var(--page-background4));
    background-size: 400% 400%;
}



.page-background>span {
    width: 150vh;
    height: 150vh;
    border-radius: 50vh;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;


    color: #000000;
    opacity: 0.25;
    filter: blur(1px);
}


.page-background > span:nth-child(1) {
    top: 64%;
    left: 3%;

    -webkit-transform-origin: 14vw -22vh;
    -moz-transform-origin: 14vw -22vh;
    transform-origin: 14vw -22vh;
    -webkit-box-shadow: 100vmin 0 20vmin currentColor;
    box-shadow: 100vmin 0 20vmin currentColor;
}

.page-background > span:nth-child(2) {
    top: 24%;
    left: 85%;

    -webkit-transform-origin: -1vw -14vh;
    -moz-transform-origin: -1vw -14vh;
    transform-origin: -1vw -14vh;
    -webkit-box-shadow: 100vmin 0 36vmin currentColor;
    box-shadow: 100vmin 0 36vmin currentColor;
}

.page-background > span:nth-child(3) {
    top: 41%;
    left: 38%;

    -webkit-transform-origin: -5vw -21vh;
    -moz-transform-origin: -5vw -21vh;
    transform-origin: -5vw -21vh;
    -webkit-box-shadow: -100vmin 0 21vmin currentColor;
    box-shadow: -100vmin 0 21vmin currentColor;
}

.page-background > span:nth-child(4) {
    top: 31%;
    left: 36%;

    -webkit-transform-origin: -24vw -5vh;
    -moz-transform-origin: -24vw -5vh;
    transform-origin: -24vw -5vh;
    -webkit-box-shadow: -100vmin 0 16vmin currentColor;
    box-shadow: -100vmin 0 16vmin currentColor;
}

.page-background > span:nth-child(5) {
    top: 82%;
    left: 36%;

    -webkit-transform-origin: -7vw -4vh;
    -moz-transform-origin: -7vw -4vh;
    transform-origin: -7vw -4vh;
    -webkit-box-shadow: 100vmin 0 24min currentColor;
    box-shadow: 100vmin 0 24vmin currentColor;
}

.page-background > span:nth-child(6) {
    top: 69%;
    left: 33%;

    -webkit-transform-origin: 19vw 0;
    -moz-transform-origin: 19vw 0;
    transform-origin: 19vw 0;
    -webkit-box-shadow: -100vmin 0 30vmin currentColor;
    box-shadow: -100vmin 0 30vmin currentColor;
}

.page-background > span:nth-child(7) {
    top: 5%;
    left: 35%;

    -webkit-transform-origin: 12vw 23vh;
    -moz-transform-origin: 12vw 23vh;
    transform-origin: 12vw 23vh;
    -webkit-box-shadow: 100vmin 0 18vmin currentColor;
    box-shadow: 100vmin 0 18vmin currentColor;
}

.page-background > span:nth-child(8) {
    top: 9%;
    left: 60%;

    -webkit-transform-origin: -16vw -24vh;
    -moz-transform-origin: -16vw -24vh;
    transform-origin: -16vw -24vh;
    -webkit-box-shadow: 100vmin 0 33vmin currentColor;
    box-shadow: 100vmin 0 33vmin currentColor;
}

.page-background > span:nth-child(9) {
    top: 100%;
    left: 63%;

    -webkit-transform-origin: -5vw 14vh;
    -moz-transform-origin: -5vw 14vh;
    transform-origin: -5vw 14vh;
    -webkit-box-shadow: -100vmin 0 28vmin currentColor;
    box-shadow: -100vmin 0 28vmin currentColor;
}

.page-background > span:nth-child(10) {
    top: 15%;
    left: 30%;

    -webkit-transform-origin: -16vw -16vh;
    -moz-transform-origin: -16vw -16vh;
    transform-origin: -16vw -16vh;
    -webkit-box-shadow: -100vmin 0 20vmin currentColor;
    box-shadow: -100vmin 0 20vmin currentColor;
}