@keyframes move {
    100% {
        transform: translate3d(0, 0, 1px) rotate(360deg);
    }
}

.background {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: #ceccd1;
    overflow: hidden;
    filter: blur(0.5rem);
    z-index: -1;
}

    .background span {
        width: 2vmin;
        height: 2vmin;
        border-radius: 2vmin;
        backface-visibility: hidden;
        position: absolute;
        animation: move;
        animation-duration: 41;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }

        .background span:nth-child(0) {
            color: #ff0000;
            top: 33%;
            left: 57%;
            animation-duration: 28s;
            animation-delay: -89s;
            transform-origin: -23vw -3vh;
            box-shadow: 4vmin 0 0.5341259766970032vmin currentColor;
        }

        .background span:nth-child(1) {
            color: #0000ff;
            top: 55%;
            left: 47%;
            animation-duration: 29s;
            animation-delay: -42s;
            transform-origin: 0vw 1vh;
            box-shadow: -4vmin 0 1.0598465740073193vmin currentColor;
        }

        .background span:nth-child(2) {
            color: #ffff00;
            top: 94%;
            left: 100%;
            animation-duration: 93s;
            animation-delay: -66s;
            transform-origin: -5vw 10vh;
            box-shadow: -4vmin 0 0.7034194352525422vmin currentColor;
        }

        .background span:nth-child(3) {
            color: #ff0000;
            top: 2%;
            left: 48%;
            animation-duration: 30s;
            animation-delay: -18s;
            transform-origin: 22vw 20vh;
            box-shadow: 4vmin 0 0.5585762266487568vmin currentColor;
        }

        .background span:nth-child(4) {
            color: #ffff00;
            top: 51%;
            left: 91%;
            animation-duration: 32s;
            animation-delay: -47s;
            transform-origin: 19vw -14vh;
            box-shadow: -4vmin 0 1.064745047084685vmin currentColor;
        }

        .background span:nth-child(5) {
            color: #00ff00;
            top: 22%;
            left: 33%;
            animation-duration: 83s;
            animation-delay: -41s;
            transform-origin: -11vw -7vh;
            box-shadow: -4vmin 0 0.570543653662791vmin currentColor;
        }

        .background span:nth-child(6) {
            color: #00ff00;
            top: 47%;
            left: 64%;
            animation-duration: 27s;
            animation-delay: -35s;
            transform-origin: -10vw 14vh;
            box-shadow: -4vmin 0 1.324747606709163vmin currentColor;
        }

        .background span:nth-child(7) {
            color: #ff0000;
            top: 61%;
            left: 17%;
            animation-duration: 84s;
            animation-delay: -21s;
            transform-origin: 11vw 13vh;
            box-shadow: -4vmin 0 0.7789188977611285vmin currentColor;
        }

        .background span:nth-child(8) {
            color: #0000ff;
            top: 29%;
            left: 71%;
            animation-duration: 21s;
            animation-delay: -8s;
            transform-origin: -15vw 6vh;
            box-shadow: 4vmin 0 0.6139740600126207vmin currentColor;
        }

        .background span:nth-child(9) {
            color: #ffff00;
            top: 57%;
            left: 33%;
            animation-duration: 87s;
            animation-delay: -41s;
            transform-origin: -6vw 18vh;
            box-shadow: -4vmin 0 0.894731029061264vmin currentColor;
        }

        .background span:nth-child(10) {
            color: #ffff00;
            top: 60%;
            left: 83%;
            animation-duration: 76s;
            animation-delay: -33s;
            transform-origin: -16vw -7vh;
            box-shadow: 4vmin 0 1.2079033607763843vmin currentColor;
        }

        .background span:nth-child(11) {
            color: #ff0000;
            top: 47%;
            left: 29%;
            animation-duration: 45s;
            animation-delay: -79s;
            transform-origin: 9vw 10vh;
            box-shadow: -4vmin 0 1.4830158203189623vmin currentColor;
        }

        .background span:nth-child(12) {
            color: #ff0000;
            top: 28%;
            left: 58%;
            animation-duration: 27s;
            animation-delay: -62s;
            transform-origin: -5vw -7vh;
            box-shadow: 4vmin 0 1.3462568372911736vmin currentColor;
        }

        .background span:nth-child(13) {
            color: #ffff00;
            top: 58%;
            left: 31%;
            animation-duration: 26s;
            animation-delay: -81s;
            transform-origin: 12vw -22vh;
            box-shadow: 4vmin 0 0.5207821959952144vmin currentColor;
        }

        .background span:nth-child(14) {
            color: #ff0000;
            top: 35%;
            left: 62%;
            animation-duration: 19s;
            animation-delay: -1s;
            transform-origin: -23vw 10vh;
            box-shadow: -4vmin 0 0.7613129577586653vmin currentColor;
        }

        .background span:nth-child(15) {
            color: #00ff00;
            top: 58%;
            left: 12%;
            animation-duration: 28s;
            animation-delay: -87s;
            transform-origin: 22vw 17vh;
            box-shadow: -4vmin 0 0.5608277550073248vmin currentColor;
        }

        .background span:nth-child(16) {
            color: #ff0000;
            top: 27%;
            left: 75%;
            animation-duration: 68s;
            animation-delay: -85s;
            transform-origin: 9vw -11vh;
            box-shadow: -4vmin 0 1.3691526904365217vmin currentColor;
        }

        .background span:nth-child(17) {
            color: #00ff00;
            top: 79%;
            left: 32%;
            animation-duration: 16s;
            animation-delay: -20s;
            transform-origin: -1vw 11vh;
            box-shadow: 4vmin 0 0.9239971195355776vmin currentColor;
        }

        .background span:nth-child(18) {
            color: #ff0000;
            top: 12%;
            left: 47%;
            animation-duration: 48s;
            animation-delay: -25s;
            transform-origin: 12vw 25vh;
            box-shadow: 4vmin 0 0.9579655171225339vmin currentColor;
        }

        .background span:nth-child(19) {
            color: #0000ff;
            top: 97%;
            left: 52%;
            animation-duration: 14s;
            animation-delay: -33s;
            transform-origin: 1vw -14vh;
            box-shadow: -4vmin 0 1.2510142879984287vmin currentColor;
        }

        .background span:nth-child(20) {
            color: #ff0000;
            top: 67%;
            left: 54%;
            animation-duration: 14s;
            animation-delay: -39s;
            transform-origin: 22vw 20vh;
            box-shadow: 4vmin 0 1.0210647035623828vmin currentColor;
        }

        .background span:nth-child(21) {
            color: #0000ff;
            top: 40%;
            left: 15%;
            animation-duration: 52s;
            animation-delay: -22s;
            transform-origin: 18vw 11vh;
            box-shadow: 4vmin 0 1.0358207099521435vmin currentColor;
        }

        .background span:nth-child(22) {
            color: #ffff00;
            top: 5%;
            left: 8%;
            animation-duration: 26s;
            animation-delay: -1s;
            transform-origin: 12vw 7vh;
            box-shadow: -4vmin 0 1.3842711441737416vmin currentColor;
        }

        .background span:nth-child(23) {
            color: #00ff00;
            top: 81%;
            left: 35%;
            animation-duration: 88s;
            animation-delay: -22s;
            transform-origin: -11vw -14vh;
            box-shadow: 4vmin 0 1.3598892297649952vmin currentColor;
        }

        .background span:nth-child(24) {
            color: #ff0000;
            top: 18%;
            left: 73%;
            animation-duration: 53s;
            animation-delay: -26s;
            transform-origin: 19vw 5vh;
            box-shadow: -4vmin 0 1.1641281711298253vmin currentColor;
        }

        .background span:nth-child(25) {
            color: #ffff00;
            top: 6%;
            left: 15%;
            animation-duration: 30s;
            animation-delay: -43s;
            transform-origin: -20vw 10vh;
            box-shadow: 4vmin 0 0.9917121951594354vmin currentColor;
        }

        .background span:nth-child(26) {
            color: #ff0000;
            top: 61%;
            left: 26%;
            animation-duration: 95s;
            animation-delay: -2s;
            transform-origin: -24vw -16vh;
            box-shadow: 4vmin 0 1.2412838433575109vmin currentColor;
        }

        .background span:nth-child(27) {
            color: #ff0000;
            top: 42%;
            left: 6%;
            animation-duration: 74s;
            animation-delay: -27s;
            transform-origin: 9vw -13vh;
            box-shadow: 4vmin 0 0.5611130729776574vmin currentColor;
        }

        .background span:nth-child(28) {
            color: #ffff00;
            top: 36%;
            left: 30%;
            animation-duration: 72s;
            animation-delay: -28s;
            transform-origin: 22vw 7vh;
            box-shadow: -4vmin 0 1.3473743992890828vmin currentColor;
        }

        .background span:nth-child(29) {
            color: #0000ff;
            top: 81%;
            left: 52%;
            animation-duration: 72s;
            animation-delay: -90s;
            transform-origin: -15vw -8vh;
            box-shadow: -4vmin 0 0.8244792482801682vmin currentColor;
        }

        .background span:nth-child(30) {
            color: #0000ff;
            top: 39%;
            left: 68%;
            animation-duration: 26s;
            animation-delay: -56s;
            transform-origin: 21vw 23vh;
            box-shadow: -4vmin 0 0.5441943499046982vmin currentColor;
        }

        .background span:nth-child(31) {
            color: #00ff00;
            top: 57%;
            left: 91%;
            animation-duration: 66s;
            animation-delay: -26s;
            transform-origin: -15vw -20vh;
            box-shadow: 4vmin 0 0.683164964814589vmin currentColor;
        }

        .background span:nth-child(32) {
            color: #00ff00;
            top: 76%;
            left: 85%;
            animation-duration: 94s;
            animation-delay: -74s;
            transform-origin: -23vw 6vh;
            box-shadow: 4vmin 0 1.3948981100437299vmin currentColor;
        }

        .background span:nth-child(33) {
            color: #0000ff;
            top: 88%;
            left: 57%;
            animation-duration: 70s;
            animation-delay: -3s;
            transform-origin: -4vw -14vh;
            box-shadow: -4vmin 0 1.352828326307613vmin currentColor;
        }

        .background span:nth-child(34) {
            color: #00ff00;
            top: 14%;
            left: 47%;
            animation-duration: 60s;
            animation-delay: -64s;
            transform-origin: -12vw 21vh;
            box-shadow: 4vmin 0 0.7261140203855614vmin currentColor;
        }

        .background span:nth-child(35) {
            color: #0000ff;
            top: 52%;
            left: 62%;
            animation-duration: 60s;
            animation-delay: -19s;
            transform-origin: 11vw 22vh;
            box-shadow: -4vmin 0 1.1568336423584362vmin currentColor;
        }

        .background span:nth-child(36) {
            color: #0000ff;
            top: 5%;
            left: 36%;
            animation-duration: 82s;
            animation-delay: -88s;
            transform-origin: 7vw 21vh;
            box-shadow: 4vmin 0 0.7235206730603168vmin currentColor;
        }

        .background span:nth-child(37) {
            color: #00ff00;
            top: 52%;
            left: 1%;
            animation-duration: 42s;
            animation-delay: -79s;
            transform-origin: -11vw -9vh;
            box-shadow: 4vmin 0 0.7874931532569236vmin currentColor;
        }

        .background span:nth-child(38) {
            color: #0000ff;
            top: 46%;
            left: 59%;
            animation-duration: 60s;
            animation-delay: -68s;
            transform-origin: -8vw 8vh;
            box-shadow: -4vmin 0 0.8369993717332003vmin currentColor;
        }

        .background span:nth-child(39) {
            color: #00ff00;
            top: 25%;
            left: 73%;
            animation-duration: 20s;
            animation-delay: -20s;
            transform-origin: 20vw -1vh;
            box-shadow: 4vmin 0 1.3948774890000915vmin currentColor;
        }

        .background span:nth-child(40) {
            color: #ff0000;
            top: 30%;
            left: 18%;
            animation-duration: 45s;
            animation-delay: -71s;
            transform-origin: 16vw -14vh;
            box-shadow: 4vmin 0 1.0156989680300712vmin currentColor;
        }

        .background span:nth-child(41) {
            color: #00ff00;
            top: 4%;
            left: 48%;
            animation-duration: 78s;
            animation-delay: -86s;
            transform-origin: -16vw 24vh;
            box-shadow: 4vmin 0 1.1425914095799694vmin currentColor;
        }

        .background span:nth-child(42) {
            color: #00ff00;
            top: 28%;
            left: 12%;
            animation-duration: 46s;
            animation-delay: -6s;
            transform-origin: 5vw 2vh;
            box-shadow: -4vmin 0 1.111304588415714vmin currentColor;
        }

        .background span:nth-child(43) {
            color: #00ff00;
            top: 81%;
            left: 12%;
            animation-duration: 83s;
            animation-delay: -36s;
            transform-origin: -15vw -3vh;
            box-shadow: -4vmin 0 0.8918423946481842vmin currentColor;
        }

        .background span:nth-child(44) {
            color: #0000ff;
            top: 20%;
            left: 50%;
            animation-duration: 82s;
            animation-delay: -56s;
            transform-origin: 10vw 4vh;
            box-shadow: -4vmin 0 1.1960294899096247vmin currentColor;
        }

        .background span:nth-child(45) {
            color: #0000ff;
            top: 2%;
            left: 15%;
            animation-duration: 94s;
            animation-delay: -29s;
            transform-origin: 5vw 14vh;
            box-shadow: -4vmin 0 1.2669261204168987vmin currentColor;
        }

        .background span:nth-child(46) {
            color: #ffff00;
            top: 25%;
            left: 30%;
            animation-duration: 11s;
            animation-delay: -48s;
            transform-origin: 5vw 20vh;
            box-shadow: -4vmin 0 0.948836804465669vmin currentColor;
        }

        .background span:nth-child(47) {
            color: #ff0000;
            top: 17%;
            left: 29%;
            animation-duration: 61s;
            animation-delay: -9s;
            transform-origin: -13vw 13vh;
            box-shadow: -4vmin 0 0.7597769182555731vmin currentColor;
        }

        .background span:nth-child(48) {
            color: #ff0000;
            top: 86%;
            left: 12%;
            animation-duration: 19s;
            animation-delay: -63s;
            transform-origin: -23vw -23vh;
            box-shadow: 4vmin 0 1.3108540548224819vmin currentColor;
        }

        .background span:nth-child(49) {
            color: #0000ff;
            top: 11%;
            left: 50%;
            animation-duration: 18s;
            animation-delay: -64s;
            transform-origin: -21vw -18vh;
            box-shadow: -4vmin 0 0.5649696733257048vmin currentColor;
        }

        .background span:nth-child(50) {
            color: #ff0000;
            top: 45%;
            left: 38%;
            animation-duration: 30s;
            animation-delay: -1s;
            transform-origin: 15vw 12vh;
            box-shadow: -4vmin 0 1.2vmin currentColor;
        }

        .background span:nth-child(51) {
            color: #00ff00;
            top: 72%;
            left: 84%;
            animation-duration: 55s;
            animation-delay: -33s;
            transform-origin: -8vw 18vh;
            box-shadow: 4vmin 0 0.9vmin currentColor;
        }

        .background span:nth-child(52) {
            color: #0000ff;
            top: 15%;
            left: 92%;
            animation-duration: 45s;
            animation-delay: -12s;
            transform-origin: 20vw -5vh;
            box-shadow: -4vmin 0 1.1vmin currentColor;
        }

        .background span:nth-child(53) {
            color: #ffff00;
            top: 88%;
            left: 25%;
            animation-duration: 38s;
            animation-delay: -45s;
            transform-origin: -12vw 8vh;
            box-shadow: 4vmin 0 0.8vmin currentColor;
        }

        .background span:nth-child(54) {
            color: #ff0000;
            top: 5%;
            left: 78%;
            animation-duration: 42s;
            animation-delay: -28s;
            transform-origin: 18vw 15vh;
            box-shadow: -4vmin 0 1.3vmin currentColor;
        }

        .background span:nth-child(55) {
            color: #00ff00;
            top: 93%;
            left: 44%;
            animation-duration: 35s;
            animation-delay: -17s;
            transform-origin: -5vw -10vh;
            box-shadow: 4vmin 0 0.7vmin currentColor;
        }

        .background span:nth-child(56) {
            color: #0000ff;
            top: 31%;
            left: 95%;
            animation-duration: 48s;
            animation-delay: -39s;
            transform-origin: 22vw 22vh;
            box-shadow: -4vmin 0 1.0vmin currentColor;
        }

        .background span:nth-child(57) {
            color: #ffff00;
            top: 67%;
            left: 8%;
            animation-duration: 52s;
            animation-delay: -23s;
            transform-origin: -15vw 5vh;
            box-shadow: 4vmin 0 0.9vmin currentColor;
        }

        .background span:nth-child(58) {
            color: #ff0000;
            top: 82%;
            left: 61%;
            animation-duration: 44s;
            animation-delay: -31s;
            transform-origin: 10vw -8vh;
            box-shadow: -4vmin 0 1.2vmin currentColor;
        }

        .background span:nth-child(59) {
            color: #00ff00;
            top: 19%;
            left: 37%;
            animation-duration: 49s;
            animation-delay: -42s;
            transform-origin: -20vw 12vh;
            box-shadow: 4vmin 0 0.8vmin currentColor;
        }

        .background span:nth-child(60) {
            color: #0000ff;
            top: 54%;
            left: 72%;
            animation-duration: 41s;
            animation-delay: -15s;
            transform-origin: 8vw -15vh;
            box-shadow: -4vmin 0 1.1vmin currentColor;
        }

.dots-container {
    pointer-events: none;
}

.container {
    /* position: relative;*/
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

.line_H {
    filter: blur(0.8rem);
    position: absolute;
    top: 50%;
    left: 0%;
    width: 200%;
    height: 5px;
    background: transparent;
    transform: translateY(-50%);
    box-shadow: 0vmin -20px 1.2vmin currentColor;
}

.line_V {
    filter: blur(0.8rem);
    position: absolute;
    top: 0%;
    left: 50%;
    width: 5px;
    height: 200%;
    background: transparent;
    transform: translateX(-50%);
    box-shadow: 0vmin -20px 1.2vmin currentColor;
}

[class*="line_H_s"] {
    margin-top: -35px;
    filter: blur(0.8rem);
    position: absolute;
    left: 47.5%;
    width: 5%;
    height: 5px;
    background: transparent;
    transform: translateY(-50%);
    box-shadow: 0vmin 20px 1.2vmin currentColor;
}

[class*="line_V_s"] {
    margin-top: -10px;
    filter: blur(0.8rem);
    position: absolute;
    top: 47.5%;
    width: 5px;
    height: 8%;
    background: transparent;
    transform: translateX(-50%);
    box-shadow: 0vmin -20px 1.2vmin currentColor;
}

.line_H_s-1 {
    top: calc(50% - 200px);
}

.line_H_s-2 {
    top: calc(50% - 400px);
}

.line_H_s-3 {
    top: calc(50% - 600px);
}

.line_H_s-4 {
    top: calc(50% - 800px);
}

.line_H_s-5 {
    top: calc(50% - 10000px);
}

.line_H_s\+1 {
    top: calc(50% + 200px);
}

.line_H_s\+2 {
    top: calc(50% + 400px);
}

.line_H_s\+3 {
    top: calc(50% + 600px);
}

.line_H_s\+4 {
    top: calc(50% + 800px);
}

.line_H_s\+5 {
    top: calc(50% + 1000px);
}

.line_V_s-1 {
    left: calc(50% - 200px);
}

.line_V_s-2 {
    left: calc(50% - 400px);
}

.line_V_s-3 {
    left: calc(50% - 600px);
}

.line_V_s-4 {
    left: calc(50% - 800px);
}

.line_V_s-5 {
    left: calc(50% - 1000px);
}

.line_V_s\+1 {
    left: calc(50% + 200px);
}

.line_V_s\+2 {
    left: calc(50% + 400px);
}

.line_V_s\+3 {
    left: calc(50% + 600px);
}

.line_V_s\+4 {
    left: calc(50% + 800px);
}

.line_V_s\+5 {
    left: calc(50% + 1000px);
}