/* basic style */
*{box-sizing:border-box;}

html,
body {
    position: relative;
    overflow: hidden;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background: radial-gradient(ellipse at left top, #72c7fe, #fafdff);
}

.container div {
    transform-style: preserve-3d;
}

.container {
    width: 100%;
    height: 100%;
    perspective: 1000px;
}

/* cube style */
.cube_wrap:nth-of-type(1) {
    position: absolute;
    top: 61%;
    left: calc(50% + 10px);
    width: 10vw;
    height: 10vw;
    animation: cube 32s linear -28s infinite;
    opacity: 0.7;
    z-index: 99;
}

@keyframes cube {
    0% {
        transform: translateX(-150vw);
    }

    100% {
        transform: translateX(150vw);
    }
}

.cube_wrap:nth-of-type(1) .cube {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: rotation 22s linear infinite;
}

@keyframes rotation {
    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

.cube_wrap:nth-of-type(1) .rotation {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotate(64deg);
}

.cube_wrap:nth-of-type(1) .wall {
    position: absolute;
    width: 100%;
    height: 100%;
    border: solid 3px #fff;
}

.cube_wrap:nth-of-type(1) .front {
    transform: translateZ(5vw);
}

.cube_wrap:nth-of-type(1) .back {
    transform: rotateY(180deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(1) .left {
    transform: rotateY(90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(1) .right {
    transform: rotateY(-90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(1) .top {
    transform: rotateX(90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(1) .bottom {
    transform: rotateX(-90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(2) {
    position: absolute;
    top: 32%;
    left: calc(50% + 20px);
    width: 10vw;
    height: 10vw;
    animation: cube 34s linear -26s infinite;
    opacity: 0.7;
    z-index: 99;
}

@keyframes cube {
    0% {
        transform: translateX(-150vw);
    }

    100% {
        transform: translateX(150vw);
    }
}

.cube_wrap:nth-of-type(2) .cube {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: rotation 27s linear infinite;
}

@keyframes rotation {
    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

.cube_wrap:nth-of-type(2) .rotation {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotate(141deg);
}

.cube_wrap:nth-of-type(2) .wall {
    position: absolute;
    width: 100%;
    height: 100%;
    border: solid 3px #fff;
}

.cube_wrap:nth-of-type(2) .front {
    transform: translateZ(5vw);
}

.cube_wrap:nth-of-type(2) .back {
    transform: rotateY(180deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(2) .left {
    transform: rotateY(90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(2) .right {
    transform: rotateY(-90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(2) .top {
    transform: rotateX(90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(2) .bottom {
    transform: rotateX(-90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(3) {
    position: absolute;
    top: 49%;
    left: calc(50% + 30px);
    width: 10vw;
    height: 10vw;
    animation: cube 36s linear -24s infinite;
    opacity: 0.7;
    z-index: 99;
}

@keyframes cube {
    0% {
        transform: translateX(-150vw);
    }

    100% {
        transform: translateX(150vw);
    }
}

.cube_wrap:nth-of-type(3) .cube {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: rotation 26s linear infinite;
}

@keyframes rotation {
    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

.cube_wrap:nth-of-type(3) .rotation {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotate(142deg);
}

.cube_wrap:nth-of-type(3) .wall {
    position: absolute;
    width: 100%;
    height: 100%;
    border: solid 3px #fff;
}

.cube_wrap:nth-of-type(3) .front {
    transform: translateZ(5vw);
}

.cube_wrap:nth-of-type(3) .back {
    transform: rotateY(180deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(3) .left {
    transform: rotateY(90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(3) .right {
    transform: rotateY(-90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(3) .top {
    transform: rotateX(90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(3) .bottom {
    transform: rotateX(-90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(4) {
    position: absolute;
    top: 18%;
    left: calc(50% + 40px);
    width: 10vw;
    height: 10vw;
    animation: cube 38s linear -22s infinite;
    opacity: 0.7;
    z-index: 99;
}

@keyframes cube {
    0% {
        transform: translateX(-150vw);
    }

    100% {
        transform: translateX(150vw);
    }
}

.cube_wrap:nth-of-type(4) .cube {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: rotation 21s linear infinite;
}

@keyframes rotation {
    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

.cube_wrap:nth-of-type(4) .rotation {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotate(48deg);
}

.cube_wrap:nth-of-type(4) .wall {
    position: absolute;
    width: 100%;
    height: 100%;
    border: solid 3px #fff;
}

.cube_wrap:nth-of-type(4) .front {
    transform: translateZ(5vw);
}

.cube_wrap:nth-of-type(4) .back {
    transform: rotateY(180deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(4) .left {
    transform: rotateY(90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(4) .right {
    transform: rotateY(-90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(4) .top {
    transform: rotateX(90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(4) .bottom {
    transform: rotateX(-90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(5) {
    position: absolute;
    top: 36%;
    left: calc(50% + 50px);
    width: 10vw;
    height: 10vw;
    animation: cube 40s linear -20s infinite;
    opacity: 0.7;
    z-index: 99;
}

@keyframes cube {
    0% {
        transform: translateX(-150vw);
    }

    100% {
        transform: translateX(150vw);
    }
}

.cube_wrap:nth-of-type(5) .cube {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: rotation 36s linear infinite;
}

@keyframes rotation {
    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

.cube_wrap:nth-of-type(5) .rotation {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotate(51deg);
}

.cube_wrap:nth-of-type(5) .wall {
    position: absolute;
    width: 100%;
    height: 100%;
    border: solid 3px #fff;
}

.cube_wrap:nth-of-type(5) .front {
    transform: translateZ(5vw);
}

.cube_wrap:nth-of-type(5) .back {
    transform: rotateY(180deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(5) .left {
    transform: rotateY(90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(5) .right {
    transform: rotateY(-90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(5) .top {
    transform: rotateX(90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(5) .bottom {
    transform: rotateX(-90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(6) {
    position: absolute;
    top: 17%;
    left: calc(50% + 60px);
    width: 10vw;
    height: 10vw;
    animation: cube 42s linear -18s infinite;
    opacity: 0.7;
    z-index: 99;
}

@keyframes cube {
    0% {
        transform: translateX(-150vw);
    }

    100% {
        transform: translateX(150vw);
    }
}

.cube_wrap:nth-of-type(6) .cube {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: rotation 30s linear infinite;
}

@keyframes rotation {
    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

.cube_wrap:nth-of-type(6) .rotation {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotate(115deg);
}

.cube_wrap:nth-of-type(6) .wall {
    position: absolute;
    width: 100%;
    height: 100%;
    border: solid 3px #fff;
}

.cube_wrap:nth-of-type(6) .front {
    transform: translateZ(5vw);
}

.cube_wrap:nth-of-type(6) .back {
    transform: rotateY(180deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(6) .left {
    transform: rotateY(90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(6) .right {
    transform: rotateY(-90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(6) .top {
    transform: rotateX(90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(6) .bottom {
    transform: rotateX(-90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(7) {
    position: absolute;
    top: 41%;
    left: calc(50% + 70px);
    width: 10vw;
    height: 10vw;
    animation: cube 44s linear -16s infinite;
    opacity: 0.7;
    z-index: 99;
}

@keyframes cube {
    0% {
        transform: translateX(-150vw);
    }

    100% {
        transform: translateX(150vw);
    }
}

.cube_wrap:nth-of-type(7) .cube {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: rotation 36s linear infinite;
}

@keyframes rotation {
    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

.cube_wrap:nth-of-type(7) .rotation {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotate(1deg);
}

.cube_wrap:nth-of-type(7) .wall {
    position: absolute;
    width: 100%;
    height: 100%;
    border: solid 3px #fff;
}

.cube_wrap:nth-of-type(7) .front {
    transform: translateZ(5vw);
}

.cube_wrap:nth-of-type(7) .back {
    transform: rotateY(180deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(7) .left {
    transform: rotateY(90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(7) .right {
    transform: rotateY(-90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(7) .top {
    transform: rotateX(90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(7) .bottom {
    transform: rotateX(-90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(8) {
    position: absolute;
    top: 39%;
    left: calc(50% + 80px);
    width: 10vw;
    height: 10vw;
    animation: cube 46s linear -14s infinite;
    opacity: 0.7;
    z-index: 99;
}

@keyframes cube {
    0% {
        transform: translateX(-150vw);
    }

    100% {
        transform: translateX(150vw);
    }
}

.cube_wrap:nth-of-type(8) .cube {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: rotation 34s linear infinite;
}

@keyframes rotation {
    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

.cube_wrap:nth-of-type(8) .rotation {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotate(112deg);
}

.cube_wrap:nth-of-type(8) .wall {
    position: absolute;
    width: 100%;
    height: 100%;
    border: solid 3px #fff;
}

.cube_wrap:nth-of-type(8) .front {
    transform: translateZ(5vw);
}

.cube_wrap:nth-of-type(8) .back {
    transform: rotateY(180deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(8) .left {
    transform: rotateY(90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(8) .right {
    transform: rotateY(-90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(8) .top {
    transform: rotateX(90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(8) .bottom {
    transform: rotateX(-90deg) translateZ(5vw);
}

.cube_wrap:nth-of-type(9) {
    position: absolute;
    top: 38%;
    left: calc(50% + 90px);
    width: 6vw;
    height: 6vw;
    animation: cube 48s linear -12s infinite;
    opacity: 0.7;
    z-index: 99;
}

@keyframes cube {
    0% {
        transform: translateX(-150vw);
    }

    100% {
        transform: translateX(150vw);
    }
}

.cube_wrap:nth-of-type(9) .cube {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: rotation 25s linear infinite;
}

@keyframes rotation {
    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

.cube_wrap:nth-of-type(9) .rotation {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotate(95deg);
}

.cube_wrap:nth-of-type(9) .wall {
    position: absolute;
    width: 100%;
    height: 100%;
    border: solid 3px #fff;
}

.cube_wrap:nth-of-type(9) .front {
    transform: translateZ(3vw);
}

.cube_wrap:nth-of-type(9) .back {
    transform: rotateY(180deg) translateZ(3vw);
}

.cube_wrap:nth-of-type(9) .left {
    transform: rotateY(90deg) translateZ(3vw);
}

.cube_wrap:nth-of-type(9) .right {
    transform: rotateY(-90deg) translateZ(3vw);
}

.cube_wrap:nth-of-type(9) .top {
    transform: rotateX(90deg) translateZ(3vw);
}

.cube_wrap:nth-of-type(9) .bottom {
    transform: rotateX(-90deg) translateZ(3vw);
}

.cube_wrap:nth-of-type(10) {
    position: absolute;
    top: 54%;
    left: calc(50% + 100px);
    width: 6vw;
    height: 6vw;
    animation: cube 50s linear -10s infinite;
    opacity: 0.7;
    z-index: 99;
}

@keyframes cube {
    0% {
        transform: translateX(-150vw);
    }

    100% {
        transform: translateX(150vw);
    }
}

.cube_wrap:nth-of-type(10) .cube {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: rotation 23s linear infinite;
}

@keyframes rotation {
    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

.cube_wrap:nth-of-type(10) .rotation {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotate(51deg);
}

.cube_wrap:nth-of-type(10) .wall {
    position: absolute;
    width: 100%;
    height: 100%;
    border: solid 3px #fff;
}

.cube_wrap:nth-of-type(10) .front {
    transform: translateZ(3vw);
}

.cube_wrap:nth-of-type(10) .back {
    transform: rotateY(180deg) translateZ(3vw);
}

.cube_wrap:nth-of-type(10) .left {
    transform: rotateY(90deg) translateZ(3vw);
}

.cube_wrap:nth-of-type(10) .right {
    transform: rotateY(-90deg) translateZ(3vw);
}

.cube_wrap:nth-of-type(10) .top {
    transform: rotateX(90deg) translateZ(3vw);
}

.cube_wrap:nth-of-type(10) .bottom {
    transform: rotateX(-90deg) translateZ(3vw);
}

.cube_wrap:nth-of-type(11) {
    position: absolute;
    top: 42%;
    left: calc(50% + 110px);
    width: 6vw;
    height: 6vw;
    animation: cube 52s linear -8s infinite;
    opacity: 0.7;
    z-index: 99;
}

@keyframes cube {
    0% {
        transform: translateX(-150vw);
    }

    100% {
        transform: translateX(150vw);
    }
}

.cube_wrap:nth-of-type(11) .cube {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: rotation 24s linear infinite;
}

@keyframes rotation {
    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

.cube_wrap:nth-of-type(11) .rotation {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotate(14deg);
}

.cube_wrap:nth-of-type(11) .wall {
    position: absolute;
    width: 100%;
    height: 100%;
    border: solid 3px #fff;
}

.cube_wrap:nth-of-type(11) .front {
    transform: translateZ(3vw);
}

.cube_wrap:nth-of-type(11) .back {
    transform: rotateY(180deg) translateZ(3vw);
}

.cube_wrap:nth-of-type(11) .left {
    transform: rotateY(90deg) translateZ(3vw);
}

.cube_wrap:nth-of-type(11) .right {
    transform: rotateY(-90deg) translateZ(3vw);
}

.cube_wrap:nth-of-type(11) .top {
    transform: rotateX(90deg) translateZ(3vw);
}

.cube_wrap:nth-of-type(11) .bottom {
    transform: rotateX(-90deg) translateZ(3vw);
}

.cube_wrap:nth-of-type(12) {
    position: absolute;
    top: 33%;
    left: calc(50% + 120px);
    width: 6vw;
    height: 6vw;
    animation: cube 54s linear -6s infinite;
    opacity: 0.7;
    z-index: 99;
}

@keyframes cube {
    0% {
        transform: translateX(-150vw);
    }

    100% {
        transform: translateX(150vw);
    }
}

.cube_wrap:nth-of-type(12) .cube {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: rotation 23s linear infinite;
}

@keyframes rotation {
    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

.cube_wrap:nth-of-type(12) .rotation {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotate(168deg);
}

.cube_wrap:nth-of-type(12) .wall {
    position: absolute;
    width: 100%;
    height: 100%;
    border: solid 3px #fff;
}

.cube_wrap:nth-of-type(12) .front {
    transform: translateZ(3vw);
}

.cube_wrap:nth-of-type(12) .back {
    transform: rotateY(180deg) translateZ(3vw);
}

.cube_wrap:nth-of-type(12) .left {
    transform: rotateY(90deg) translateZ(3vw);
}

.cube_wrap:nth-of-type(12) .right {
    transform: rotateY(-90deg) translateZ(3vw);
}

.cube_wrap:nth-of-type(12) .top {
    transform: rotateX(90deg) translateZ(3vw);
}

.cube_wrap:nth-of-type(12) .bottom {
    transform: rotateX(-90deg) translateZ(3vw);
}

/* square style */
.square:nth-of-type(1) {
    position: absolute;
    top: calc(20% + 99px);
    left: 95%;
    opacity: 0.3;
}

.square:nth-of-type(2) {
    position: absolute;
    top: calc(20% + 195px);
    left: 45%;
    opacity: 0.3;
}

.square:nth-of-type(3) {
    position: absolute;
    top: calc(20% + 131px);
    left: 53%;
    opacity: 0.3;
}

.square:nth-of-type(4) {
    position: absolute;
    top: calc(20% + 37px);
    left: 17%;
    opacity: 0.3;
}

.square:nth-of-type(5) {
    position: absolute;
    top: calc(20% + 25px);
    left: 48%;
    opacity: 0.3;
}

.square:nth-of-type(6) {
    position: absolute;
    top: calc(20% + 217px);
    left: 68%;
    opacity: 0.3;
}

.square:nth-of-type(7) {
    position: absolute;
    top: calc(20% + 263px);
    left: 64%;
    opacity: 0.3;
}

.square:nth-of-type(8) {
    position: absolute;
    top: calc(20% + 197px);
    left: 99%;
    opacity: 0.3;
}

.square:nth-of-type(9) {
    position: absolute;
    top: calc(20% + 103px);
    left: 2%;
    opacity: 0.3;
}

.square:nth-of-type(10) {
    position: absolute;
    top: calc(20% + 170px);
    left: 43%;
    opacity: 0.3;
}

.square:nth-of-type(11) {
    position: absolute;
    top: calc(20% + 257px);
    left: 35%;
    opacity: 0.3;
}

.square:nth-of-type(12) {
    position: absolute;
    top: calc(20% + 255px);
    left: 27%;
    opacity: 0.3;
}

.square:nth-of-type(13) {
    position: absolute;
    top: calc(20% + 219px);
    left: 39%;
    opacity: 0.3;
}

.square:nth-of-type(14) {
    position: absolute;
    top: calc(20% + 259px);
    left: 93%;
    opacity: 0.3;
}

.square:nth-of-type(15) {
    position: absolute;
    top: calc(20% + 201px);
    left: 92%;
    opacity: 0.3;
}

.square:nth-of-type(16) {
    position: absolute;
    top: calc(20% + 234px);
    left: 53%;
    opacity: 0.3;
}

.square:nth-of-type(17) {
    position: absolute;
    top: calc(20% + 260px);
    left: 7%;
    opacity: 0.3;
}

.square:nth-of-type(18) {
    position: absolute;
    top: calc(20% + 41px);
    left: 42%;
    opacity: 0.3;
}

.square:nth-of-type(19) {
    position: absolute;
    top: calc(20% + 172px);
    left: 87%;
    opacity: 0.3;
}

.square:nth-of-type(20) {
    position: absolute;
    top: calc(20% + 266px);
    left: 67%;
    opacity: 0.3;
}

.square:nth-of-type(21) {
    position: absolute;
    top: calc(20% + 9px);
    left: 19%;
    opacity: 0.3;
}

.square:nth-of-type(22) {
    position: absolute;
    top: calc(20% + 61px);
    left: 8%;
    opacity: 0.3;
}

.square:nth-of-type(23) {
    position: absolute;
    top: calc(20% + 80px);
    left: 73%;
    opacity: 0.3;
}

.square:nth-of-type(24) {
    position: absolute;
    top: calc(20% + 158px);
    left: 39%;
    opacity: 0.3;
}

.square:nth-of-type(25) {
    position: absolute;
    top: calc(20% + 274px);
    left: 30%;
    opacity: 0.3;
}

.square:nth-of-type(26) {
    position: absolute;
    top: calc(20% + 113px);
    left: 33%;
    opacity: 0.3;
}

.square:nth-of-type(27) {
    position: absolute;
    top: calc(20% + 292px);
    left: 71%;
    opacity: 0.3;
}

.square:nth-of-type(28) {
    position: absolute;
    top: calc(20% + 54px);
    left: 36%;
    opacity: 0.3;
}

.square:nth-of-type(29) {
    position: absolute;
    top: calc(20% + 225px);
    left: 20%;
    opacity: 0.3;
}

.square:nth-of-type(30) {
    position: absolute;
    top: calc(20% + 138px);
    left: 98%;
    opacity: 0.3;
}

.square:nth-of-type(31) {
    position: absolute;
    top: calc(20% + 98px);
    left: 77%;
    opacity: 0.3;
}

.square:nth-of-type(32) {
    position: absolute;
    top: calc(20% + 166px);
    left: 1%;
    opacity: 0.3;
}

.square:nth-of-type(33) {
    position: absolute;
    top: calc(20% + 14px);
    left: 66%;
    opacity: 0.3;
}

.square:nth-of-type(34) {
    position: absolute;
    top: calc(20% + 103px);
    left: 43%;
    opacity: 0.3;
}

.square:nth-of-type(35) {
    position: absolute;
    top: calc(20% + 178px);
    left: 6%;
    opacity: 0.3;
}

.square:nth-of-type(36) {
    position: absolute;
    top: calc(20% + 247px);
    left: 68%;
    opacity: 0.3;
}

.square:nth-of-type(37) {
    position: absolute;
    top: calc(20% + 182px);
    left: 9%;
    opacity: 0.3;
}

.square:nth-of-type(38) {
    position: absolute;
    top: calc(20% + 38px);
    left: 38%;
    opacity: 0.3;
}

.square:nth-of-type(39) {
    position: absolute;
    top: calc(20% + 71px);
    left: 53%;
    opacity: 0.3;
}

.square:nth-of-type(40) {
    position: absolute;
    top: calc(20% + 210px);
    left: 59%;
    opacity: 0.3;
}

.square:nth-of-type(41) {
    position: absolute;
    top: calc(20% + 281px);
    left: 66%;
    opacity: 0.3;
}

.square:nth-of-type(42) {
    position: absolute;
    top: calc(20% + 53px);
    left: 9%;
    opacity: 0.3;
}

.square:nth-of-type(43) {
    position: absolute;
    top: calc(20% + 90px);
    left: 84%;
    opacity: 0.3;
}

.square:nth-of-type(44) {
    position: absolute;
    top: calc(20% + 126px);
    left: 44%;
    opacity: 0.3;
}

.square:nth-of-type(45) {
    position: absolute;
    top: calc(20% + 51px);
    left: 96%;
    opacity: 0.3;
}

.square:nth-of-type(46) {
    position: absolute;
    top: calc(20% + 149px);
    left: 72%;
    opacity: 0.3;
}

.square:nth-of-type(47) {
    position: absolute;
    top: calc(20% + 249px);
    left: 86%;
    opacity: 0.3;
}

.square:nth-of-type(48) {
    position: absolute;
    top: calc(20% + 241px);
    left: 14%;
    opacity: 0.3;
}

.square:nth-of-type(49) {
    position: absolute;
    top: calc(20% + 91px);
    left: 97%;
    opacity: 0.3;
}

.square:nth-of-type(50) {
    position: absolute;
    top: calc(20% + 284px);
    left: 80%;
    opacity: 0.3;
}

.square:nth-of-type(51) {
    position: absolute;
    top: calc(20% + 30px);
    left: 16%;
    opacity: 0.3;
}

.square:nth-of-type(52) {
    position: absolute;
    top: calc(20% + 112px);
    left: 2%;
    opacity: 0.3;
}

.square:nth-of-type(53) {
    position: absolute;
    top: calc(20% + 189px);
    left: 26%;
    opacity: 0.3;
}

.square:nth-of-type(54) {
    position: absolute;
    top: calc(20% + 49px);
    left: 2%;
    opacity: 0.3;
}

.square:nth-of-type(55) {
    position: absolute;
    top: calc(20% + 200px);
    left: 24%;
    opacity: 0.3;
}

.square:nth-of-type(56) {
    position: absolute;
    top: calc(20% + 52px);
    left: 1%;
    opacity: 0.3;
}

.square:nth-of-type(57) {
    position: absolute;
    top: calc(20% + 152px);
    left: 49%;
    opacity: 0.3;
}

.square:nth-of-type(58) {
    position: absolute;
    top: calc(20% + 239px);
    left: 49%;
    opacity: 0.3;
}

.square:nth-of-type(59) {
    position: absolute;
    top: calc(20% + 280px);
    left: 53%;
    opacity: 0.3;
}

.square:nth-of-type(60) {
    position: absolute;
    top: calc(20% + 242px);
    left: 19%;
    opacity: 0.3;
}

.square:nth-of-type(61) {
    position: absolute;
    top: calc(20% + 245px);
    left: 31%;
    opacity: 0.3;
}

.square:nth-of-type(62) {
    position: absolute;
    top: calc(20% + 88px);
    left: 20%;
    opacity: 0.3;
}

.square:nth-of-type(63) {
    position: absolute;
    top: calc(20% + 183px);
    left: 76%;
    opacity: 0.3;
}

.square:nth-of-type(64) {
    position: absolute;
    top: calc(20% + 224px);
    left: 28%;
    opacity: 0.3;
}

.square:nth-of-type(65) {
    position: absolute;
    top: calc(20% + 260px);
    left: 71%;
    opacity: 0.3;
}

.square:nth-of-type(66) {
    position: absolute;
    top: calc(20% + 263px);
    left: 65%;
    opacity: 0.3;
}

.square:nth-of-type(67) {
    position: absolute;
    top: calc(20% + 292px);
    left: 43%;
    opacity: 0.3;
}

.square:nth-of-type(68) {
    position: absolute;
    top: calc(20% + 198px);
    left: 37%;
    opacity: 0.3;
}

.square:nth-of-type(69) {
    position: absolute;
    top: calc(20% + 33px);
    left: 60%;
    opacity: 0.3;
}

.square:nth-of-type(70) {
    position: absolute;
    top: calc(20% + 172px);
    left: 38%;
    opacity: 0.3;
}

.square:nth-of-type(71) {
    position: absolute;
    top: calc(20% + 199px);
    left: 13%;
    opacity: 0.3;
}

.square:nth-of-type(72) {
    position: absolute;
    top: calc(20% + 214px);
    left: 7%;
    opacity: 0.3;
}

.square:nth-of-type(73) {
    position: absolute;
    top: calc(20% + 12px);
    left: 50%;
    opacity: 0.3;
}

.square:nth-of-type(74) {
    position: absolute;
    top: calc(20% + 23px);
    left: 73%;
    opacity: 0.3;
}

.square:nth-of-type(75) {
    position: absolute;
    top: calc(20% + 19px);
    left: 14%;
    opacity: 0.3;
}

.square:nth-of-type(76) {
    position: absolute;
    top: calc(20% + 83px);
    left: 13%;
    opacity: 0.3;
}

.square:nth-of-type(77) {
    position: absolute;
    top: calc(20% + 271px);
    left: 23%;
    opacity: 0.3;
}

.square:nth-of-type(78) {
    position: absolute;
    top: calc(20% + 33px);
    left: 65%;
    opacity: 0.3;
}

.square:nth-of-type(79) {
    position: absolute;
    top: calc(20% + 252px);
    left: 66%;
    opacity: 0.3;
}

.square:nth-of-type(80) {
    position: absolute;
    top: calc(20% + 55px);
    left: 90%;
    opacity: 0.3;
}

.square:nth-of-type(81) {
    position: absolute;
    top: calc(20% + 197px);
    left: 51%;
    opacity: 0.3;
}

.square:nth-of-type(82) {
    position: absolute;
    top: calc(20% + 154px);
    left: 1%;
    opacity: 0.3;
}

.square:nth-of-type(83) {
    position: absolute;
    top: calc(20% + 26px);
    left: 94%;
    opacity: 0.3;
}

.square:nth-of-type(84) {
    position: absolute;
    top: calc(20% + 16px);
    left: 67%;
    opacity: 0.3;
}

.square:nth-of-type(85) {
    position: absolute;
    top: calc(20% + 106px);
    left: 29%;
    opacity: 0.3;
}

.square:nth-of-type(86) {
    position: absolute;
    top: calc(20% + 258px);
    left: 3%;
    opacity: 0.3;
}

.square:nth-of-type(87) {
    position: absolute;
    top: calc(20% + 170px);
    left: 49%;
    opacity: 0.3;
}

.square:nth-of-type(88) {
    position: absolute;
    top: calc(20% + 140px);
    left: 100%;
    opacity: 0.3;
}

.square:nth-of-type(89) {
    position: absolute;
    top: calc(20% + 132px);
    left: 7%;
    opacity: 0.3;
}

.square:nth-of-type(90) {
    position: absolute;
    top: calc(20% + 132px);
    left: 8%;
    opacity: 0.3;
}

.square:nth-of-type(91) {
    position: absolute;
    top: calc(20% + 249px);
    left: 35%;
    opacity: 0.3;
}

.square:nth-of-type(92) {
    position: absolute;
    top: calc(20% + 20px);
    left: 63%;
    opacity: 0.3;
}

.square:nth-of-type(93) {
    position: absolute;
    top: calc(20% + 263px);
    left: 11%;
    opacity: 0.3;
}

.square:nth-of-type(94) {
    position: absolute;
    top: calc(20% + 238px);
    left: 62%;
    opacity: 0.3;
}

.square:nth-of-type(95) {
    position: absolute;
    top: calc(20% + 167px);
    left: 21%;
    opacity: 0.3;
}

.square:nth-of-type(96) {
    position: absolute;
    top: calc(20% + 119px);
    left: 78%;
    opacity: 0.3;
}

.square:nth-of-type(97) {
    position: absolute;
    top: calc(20% + 115px);
    left: 1%;
    opacity: 0.3;
}

.square:nth-of-type(98) {
    position: absolute;
    top: calc(20% + 225px);
    left: 40%;
    opacity: 0.3;
}

.square:nth-of-type(99) {
    position: absolute;
    top: calc(20% + 127px);
    left: 91%;
    opacity: 0.3;
}

.square:nth-of-type(100) {
    position: absolute;
    top: calc(20% + 285px);
    left: 72%;
    opacity: 0.3;
}

.square:nth-of-type(101) {
    position: absolute;
    top: calc(20% + 101px);
    left: 100%;
    opacity: 0.3;
}

.square:nth-of-type(102) {
    position: absolute;
    top: calc(20% + 232px);
    left: 13%;
    opacity: 0.3;
}

.square:nth-of-type(103) {
    position: absolute;
    top: calc(20% + 72px);
    left: 3%;
    opacity: 0.3;
}

.square:nth-of-type(104) {
    position: absolute;
    top: calc(20% + 171px);
    left: 31%;
    opacity: 0.3;
}

.square:nth-of-type(105) {
    position: absolute;
    top: calc(20% + 54px);
    left: 69%;
    opacity: 0.3;
}

.square:nth-of-type(106) {
    position: absolute;
    top: calc(20% + 91px);
    left: 11%;
    opacity: 0.3;
}

.square:nth-of-type(107) {
    position: absolute;
    top: calc(20% + 50px);
    left: 88%;
    opacity: 0.3;
}

.square:nth-of-type(108) {
    position: absolute;
    top: calc(20% + 49px);
    left: 3%;
    opacity: 0.3;
}

.square:nth-of-type(109) {
    position: absolute;
    top: calc(20% + 156px);
    left: 28%;
    opacity: 0.3;
}

.square:nth-of-type(110) {
    position: absolute;
    top: calc(20% + 124px);
    left: 38%;
    opacity: 0.3;
}

.square:nth-of-type(111) {
    position: absolute;
    top: calc(20% + 55px);
    left: 78%;
    opacity: 0.3;
}

.square:nth-of-type(112) {
    position: absolute;
    top: calc(20% + 144px);
    left: 68%;
    opacity: 0.3;
}

.square:nth-of-type(113) {
    position: absolute;
    top: calc(20% + 31px);
    left: 37%;
    opacity: 0.3;
}

.square:nth-of-type(114) {
    position: absolute;
    top: calc(20% + 62px);
    left: 65%;
    opacity: 0.3;
}

.square:nth-of-type(115) {
    position: absolute;
    top: calc(20% + 249px);
    left: 70%;
    opacity: 0.3;
}

.square:nth-of-type(116) {
    position: absolute;
    top: calc(20% + 163px);
    left: 43%;
    opacity: 0.3;
}

.square:nth-of-type(117) {
    position: absolute;
    top: calc(20% + 154px);
    left: 82%;
    opacity: 0.3;
}

.square:nth-of-type(118) {
    position: absolute;
    top: calc(20% + 136px);
    left: 71%;
    opacity: 0.3;
}

.square:nth-of-type(119) {
    position: absolute;
    top: calc(20% + 231px);
    left: 30%;
    opacity: 0.3;
}

.square:nth-of-type(120) {
    position: absolute;
    top: calc(20% + 245px);
    left: 81%;
    opacity: 0.3;
}

.square:nth-of-type(121) {
    position: absolute;
    top: calc(20% + 1px);
    left: 65%;
    opacity: 0.3;
}

.square:nth-of-type(122) {
    position: absolute;
    top: calc(20% + 201px);
    left: 98%;
    opacity: 0.3;
}

.square:nth-of-type(123) {
    position: absolute;
    top: calc(20% + 235px);
    left: 11%;
    opacity: 0.3;
}

.square:nth-of-type(124) {
    position: absolute;
    top: calc(20% + 55px);
    left: 48%;
    opacity: 0.3;
}

.square:nth-of-type(125) {
    position: absolute;
    top: calc(20% + 116px);
    left: 73%;
    opacity: 0.3;
}

.square:nth-of-type(126) {
    position: absolute;
    top: calc(20% + 166px);
    left: 34%;
    opacity: 0.3;
}

.square:nth-of-type(127) {
    position: absolute;
    top: calc(20% + 164px);
    left: 18%;
    opacity: 0.3;
}

.square:nth-of-type(128) {
    position: absolute;
    top: calc(20% + 175px);
    left: 45%;
    opacity: 0.3;
}

.square:nth-of-type(129) {
    position: absolute;
    top: calc(20% + 28px);
    left: 64%;
    opacity: 0.3;
}

.square:nth-of-type(130) {
    position: absolute;
    top: calc(20% + 177px);
    left: 12%;
    opacity: 0.3;
}

.square:nth-of-type(131) {
    position: absolute;
    top: calc(20% + 277px);
    left: 39%;
    opacity: 0.3;
}

.square:nth-of-type(132) {
    position: absolute;
    top: calc(20% + 22px);
    left: 32%;
    opacity: 0.3;
}

.square:nth-of-type(133) {
    position: absolute;
    top: calc(20% + 172px);
    left: 71%;
    opacity: 0.3;
}

.square:nth-of-type(134) {
    position: absolute;
    top: calc(20% + 252px);
    left: 96%;
    opacity: 0.3;
}

.square:nth-of-type(135) {
    position: absolute;
    top: calc(20% + 169px);
    left: 41%;
    opacity: 0.3;
}

.square:nth-of-type(136) {
    position: absolute;
    top: calc(20% + 115px);
    left: 18%;
    opacity: 0.3;
}

.square:nth-of-type(137) {
    position: absolute;
    top: calc(20% + 102px);
    left: 94%;
    opacity: 0.3;
}

.square:nth-of-type(138) {
    position: absolute;
    top: calc(20% + 198px);
    left: 70%;
    opacity: 0.3;
}

.square:nth-of-type(139) {
    position: absolute;
    top: calc(20% + 59px);
    left: 48%;
    opacity: 0.3;
}

.square:nth-of-type(140) {
    position: absolute;
    top: calc(20% + 59px);
    left: 26%;
    opacity: 0.3;
}

.square:nth-of-type(141) {
    position: absolute;
    top: calc(20% + 177px);
    left: 39%;
    opacity: 0.3;
}

.square:nth-of-type(142) {
    position: absolute;
    top: calc(20% + 23px);
    left: 8%;
    opacity: 0.3;
}

.square:nth-of-type(143) {
    position: absolute;
    top: calc(20% + 272px);
    left: 1%;
    opacity: 0.3;
}

.square:nth-of-type(144) {
    position: absolute;
    top: calc(20% + 166px);
    left: 33%;
    opacity: 0.3;
}

.square:nth-of-type(145) {
    position: absolute;
    top: calc(20% + 46px);
    left: 63%;
    opacity: 0.3;
}

.square:nth-of-type(146) {
    position: absolute;
    top: calc(20% + 83px);
    left: 33%;
    opacity: 0.3;
}

.square:nth-of-type(147) {
    position: absolute;
    top: calc(20% + 83px);
    left: 19%;
    opacity: 0.3;
}

.square:nth-of-type(148) {
    position: absolute;
    top: calc(20% + 119px);
    left: 11%;
    opacity: 0.3;
}

.square:nth-of-type(149) {
    position: absolute;
    top: calc(20% + 91px);
    left: 69%;
    opacity: 0.3;
}

.square:nth-of-type(150) {
    position: absolute;
    top: calc(20% + 255px);
    left: 78%;
    opacity: 0.3;
}

.square:nth-of-type(1) {
    width: 1.0333333333vw;
    height: 1.0333333333vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 60s -32s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(2) {
    width: 1.0666666667vw;
    height: 1.0666666667vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 60s -34s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(3) {
    width: 1.1vw;
    height: 1.1vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 54s -20s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(4) {
    width: 1.1333333333vw;
    height: 1.1333333333vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 57s -40s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(5) {
    width: 1.1666666667vw;
    height: 1.1666666667vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 53s -43s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(6) {
    width: 1.2vw;
    height: 1.2vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 59s -48s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(7) {
    width: 1.2333333333vw;
    height: 1.2333333333vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 58s -15s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(8) {
    width: 1.2666666667vw;
    height: 1.2666666667vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 52s -16s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(9) {
    width: 1.3vw;
    height: 1.3vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 60s -6s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(10) {
    width: 1.3333333333vw;
    height: 1.3333333333vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 60s -1s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(11) {
    width: 1.3666666667vw;
    height: 1.3666666667vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 53s -24s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(12) {
    width: 1.4vw;
    height: 1.4vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 52s -46s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(13) {
    width: 1.4333333333vw;
    height: 1.4333333333vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 54s -38s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(14) {
    width: 1.4666666667vw;
    height: 1.4666666667vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 57s -46s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(15) {
    width: 1.5vw;
    height: 1.5vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 54s -24s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(16) {
    width: 1.5333333333vw;
    height: 1.5333333333vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 51s -10s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(17) {
    width: 1.5666666667vw;
    height: 1.5666666667vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 52s -38s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(18) {
    width: 1.6vw;
    height: 1.6vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 56s -45s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(19) {
    width: 1.6333333333vw;
    height: 1.6333333333vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 56s -20s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(20) {
    width: 1.6666666667vw;
    height: 1.6666666667vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 53s -49s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(21) {
    width: 1.7vw;
    height: 1.7vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 59s -38s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(22) {
    width: 1.7333333333vw;
    height: 1.7333333333vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 56s -38s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(23) {
    width: 1.7666666667vw;
    height: 1.7666666667vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 57s -42s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(24) {
    width: 1.8vw;
    height: 1.8vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 56s -3s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(25) {
    width: 1.8333333333vw;
    height: 1.8333333333vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 52s -45s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(26) {
    width: 1.8666666667vw;
    height: 1.8666666667vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 59s -29s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(27) {
    width: 1.9vw;
    height: 1.9vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 52s -16s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(28) {
    width: 1.9333333333vw;
    height: 1.9333333333vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 54s -12s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(29) {
    width: 1.9666666667vw;
    height: 1.9666666667vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 56s -4s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(30) {
    width: 2vw;
    height: 2vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 56s -41s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(31) {
    width: 2.0333333333vw;
    height: 2.0333333333vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 52s -36s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(32) {
    width: 2.0666666667vw;
    height: 2.0666666667vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 53s -25s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(33) {
    width: 2.1vw;
    height: 2.1vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 55s -14s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(34) {
    width: 2.1333333333vw;
    height: 2.1333333333vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 59s -17s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(35) {
    width: 2.1666666667vw;
    height: 2.1666666667vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 56s -9s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(36) {
    width: 2.2vw;
    height: 2.2vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 59s -39s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(37) {
    width: 2.2333333333vw;
    height: 2.2333333333vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 58s -23s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(38) {
    width: 2.2666666667vw;
    height: 2.2666666667vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 56s -36s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(39) {
    width: 2.3vw;
    height: 2.3vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 52s -41s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(40) {
    width: 2.3333333333vw;
    height: 2.3333333333vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 51s -45s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(41) {
    width: 2.3666666667vw;
    height: 2.3666666667vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 55s -7s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(42) {
    width: 2.4vw;
    height: 2.4vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 58s -22s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(43) {
    width: 2.4333333333vw;
    height: 2.4333333333vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 56s -5s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(44) {
    width: 2.4666666667vw;
    height: 2.4666666667vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 55s -36s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(45) {
    width: 2.5vw;
    height: 2.5vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 59s -15s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(46) {
    width: 2.5333333333vw;
    height: 2.5333333333vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 56s -17s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(47) {
    width: 2.5666666667vw;
    height: 2.5666666667vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 60s -9s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(48) {
    width: 2.6vw;
    height: 2.6vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 52s -11s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(49) {
    width: 2.6333333333vw;
    height: 2.6333333333vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 59s -22s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(50) {
    width: 2.6666666667vw;
    height: 2.6666666667vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 54s -46s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(51) {
    width: 2.7vw;
    height: 2.7vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 53s -28s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(52) {
    width: 2.7333333333vw;
    height: 2.7333333333vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 58s -39s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(53) {
    width: 2.7666666667vw;
    height: 2.7666666667vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 52s -43s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(54) {
    width: 2.8vw;
    height: 2.8vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 52s -41s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(55) {
    width: 2.8333333333vw;
    height: 2.8333333333vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 55s -3s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(56) {
    width: 2.8666666667vw;
    height: 2.8666666667vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 51s -45s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(57) {
    width: 2.9vw;
    height: 2.9vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 57s -32s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(58) {
    width: 2.9333333333vw;
    height: 2.9333333333vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 59s -36s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(59) {
    width: 2.9666666667vw;
    height: 2.9666666667vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 53s -21s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(60) {
    width: 3vw;
    height: 3vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 52s -1s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(61) {
    width: 3.0333333333vw;
    height: 3.0333333333vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 60s -27s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(62) {
    width: 3.0666666667vw;
    height: 3.0666666667vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 53s -3s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(63) {
    width: 3.1vw;
    height: 3.1vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 54s -48s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(64) {
    width: 3.1333333333vw;
    height: 3.1333333333vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 53s -2s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(65) {
    width: 3.1666666667vw;
    height: 3.1666666667vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 59s -43s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(66) {
    width: 3.2vw;
    height: 3.2vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 57s -5s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(67) {
    width: 3.2333333333vw;
    height: 3.2333333333vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 53s -9s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(68) {
    width: 3.2666666667vw;
    height: 3.2666666667vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 60s -25s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(69) {
    width: 3.3vw;
    height: 3.3vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 53s -20s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(70) {
    width: 3.3333333333vw;
    height: 3.3333333333vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 54s -36s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(71) {
    width: 3.3666666667vw;
    height: 3.3666666667vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 59s -7s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(72) {
    width: 3.4vw;
    height: 3.4vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 55s -21s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(73) {
    width: 3.4333333333vw;
    height: 3.4333333333vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 59s -5s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(74) {
    width: 3.4666666667vw;
    height: 3.4666666667vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 57s -37s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(75) {
    width: 3.5vw;
    height: 3.5vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 60s -34s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(76) {
    width: 3.5333333333vw;
    height: 3.5333333333vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 52s -27s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(77) {
    width: 3.5666666667vw;
    height: 3.5666666667vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 60s -46s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(78) {
    width: 3.6vw;
    height: 3.6vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 52s -41s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(79) {
    width: 3.6333333333vw;
    height: 3.6333333333vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 60s -12s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(80) {
    width: 3.6666666667vw;
    height: 3.6666666667vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 51s -37s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(81) {
    width: 3.7vw;
    height: 3.7vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 58s -24s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(82) {
    width: 3.7333333333vw;
    height: 3.7333333333vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 56s -1s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(83) {
    width: 3.7666666667vw;
    height: 3.7666666667vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 60s -13s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(84) {
    width: 3.8vw;
    height: 3.8vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 58s -41s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(85) {
    width: 3.8333333333vw;
    height: 3.8333333333vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 60s -48s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(86) {
    width: 3.8666666667vw;
    height: 3.8666666667vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 56s -49s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(87) {
    width: 3.9vw;
    height: 3.9vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 60s -44s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(88) {
    width: 3.9333333333vw;
    height: 3.9333333333vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 52s -26s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(89) {
    width: 3.9666666667vw;
    height: 3.9666666667vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 53s -11s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(90) {
    width: 4vw;
    height: 4vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 59s -29s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(91) {
    width: 4.0333333333vw;
    height: 4.0333333333vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 56s -38s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(92) {
    width: 4.0666666667vw;
    height: 4.0666666667vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 57s -39s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(93) {
    width: 4.1vw;
    height: 4.1vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 58s -42s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(94) {
    width: 4.1333333333vw;
    height: 4.1333333333vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 51s -26s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(95) {
    width: 4.1666666667vw;
    height: 4.1666666667vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 60s -16s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(96) {
    width: 4.2vw;
    height: 4.2vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 57s -41s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(97) {
    width: 4.2333333333vw;
    height: 4.2333333333vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 55s -4s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(98) {
    width: 4.2666666667vw;
    height: 4.2666666667vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 57s -15s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(99) {
    width: 4.3vw;
    height: 4.3vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 55s -15s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(100) {
    width: 4.3333333333vw;
    height: 4.3333333333vw;
    background-color: #b0eaff;
    box-shadow: 0 0 8px #b0eaff, 0 0 4px #b0eaff, 0 0 4px #b0eaff;
    animation: square 52s -28s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(101) {
    width: 3.02vw;
    height: 3.02vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 54s -42s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(102) {
    width: 3.04vw;
    height: 3.04vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 56s -16s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(103) {
    width: 3.06vw;
    height: 3.06vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 52s -2s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(104) {
    width: 3.08vw;
    height: 3.08vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 57s -37s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(105) {
    width: 3.1vw;
    height: 3.1vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 59s -33s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(106) {
    width: 3.12vw;
    height: 3.12vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 52s -23s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(107) {
    width: 3.14vw;
    height: 3.14vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 53s -20s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(108) {
    width: 3.16vw;
    height: 3.16vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 58s -24s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(109) {
    width: 3.18vw;
    height: 3.18vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 53s -37s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(110) {
    width: 3.2vw;
    height: 3.2vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 56s -15s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(111) {
    width: 3.22vw;
    height: 3.22vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 53s -43s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(112) {
    width: 3.24vw;
    height: 3.24vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 54s -17s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(113) {
    width: 3.26vw;
    height: 3.26vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 52s -7s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(114) {
    width: 3.28vw;
    height: 3.28vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 53s -11s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(115) {
    width: 3.3vw;
    height: 3.3vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 53s -42s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(116) {
    width: 3.32vw;
    height: 3.32vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 59s -38s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(117) {
    width: 3.34vw;
    height: 3.34vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 60s -18s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(118) {
    width: 3.36vw;
    height: 3.36vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 53s -9s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(119) {
    width: 3.38vw;
    height: 3.38vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 58s -24s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(120) {
    width: 3.4vw;
    height: 3.4vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 58s -41s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(121) {
    width: 3.42vw;
    height: 3.42vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 59s -6s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(122) {
    width: 3.44vw;
    height: 3.44vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 55s -11s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(123) {
    width: 3.46vw;
    height: 3.46vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 53s -15s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(124) {
    width: 3.48vw;
    height: 3.48vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 56s -22s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(125) {
    width: 3.5vw;
    height: 3.5vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 59s -15s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(126) {
    width: 3.52vw;
    height: 3.52vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 51s -39s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(127) {
    width: 3.54vw;
    height: 3.54vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 60s -26s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(128) {
    width: 3.56vw;
    height: 3.56vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 57s -3s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(129) {
    width: 3.58vw;
    height: 3.58vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 51s -47s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(130) {
    width: 3.6vw;
    height: 3.6vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 53s -23s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(131) {
    width: 3.62vw;
    height: 3.62vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 54s -11s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(132) {
    width: 3.64vw;
    height: 3.64vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 56s -41s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(133) {
    width: 3.66vw;
    height: 3.66vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 54s -13s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(134) {
    width: 3.68vw;
    height: 3.68vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 59s -45s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(135) {
    width: 3.7vw;
    height: 3.7vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 55s -28s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(136) {
    width: 3.72vw;
    height: 3.72vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 53s -41s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(137) {
    width: 3.74vw;
    height: 3.74vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 55s -36s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(138) {
    width: 3.76vw;
    height: 3.76vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 53s -8s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(139) {
    width: 3.78vw;
    height: 3.78vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 60s -16s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(140) {
    width: 3.8vw;
    height: 3.8vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 51s -24s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(141) {
    width: 3.82vw;
    height: 3.82vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 56s -24s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(142) {
    width: 3.84vw;
    height: 3.84vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 60s -14s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(143) {
    width: 3.86vw;
    height: 3.86vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 60s -20s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(144) {
    width: 3.88vw;
    height: 3.88vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 56s -32s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(145) {
    width: 3.9vw;
    height: 3.9vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 57s -30s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(146) {
    width: 3.92vw;
    height: 3.92vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 59s -30s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(147) {
    width: 3.94vw;
    height: 3.94vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 59s -33s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(148) {
    width: 3.96vw;
    height: 3.96vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 57s -50s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(149) {
    width: 3.98vw;
    height: 3.98vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 57s -41s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

.square:nth-of-type(150) {
    width: 4vw;
    height: 4vw;
    background-color: #f9f9f9;
    box-shadow: 0 0 8px #f9f9f9, 0 0 4px #f9f9f9, 0 0 4px #f9f9f9;
    animation: square 57s -39s infinite;
}

@keyframes square {
    0% {
        transform: translateX(-120vw);
    }

    100% {
        transform: translateX(120vw);
    }
}
/* canvas style */
#wrap {
    height: 100%;
    width: 100%;
}

canvas {
    display: block;
}


.login {
    width: 420px;
    height: 300px;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -210px;
    margin-top: -140px;
    background: rgba(255,255,255,0.7);
    border-radius: 10px;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.4);
}
.login-title {
    width: 380px;
    height: 50px;
    line-height:50px;
    position:absolute;
    left:20px; 
    top:30px;
    text-align:center;
    font-size:30px;
}
.login-form {
    width: 340px;
    height: 40px;
    position: absolute;
    left: 20px;
    top: 100px;
}

.title-logo {
    display: inline-block;
    width: 40px;
    height:40px;
    background-image: url(/Content/Icon/EManage.png);
    background-size: cover;
    vertical-align: middle;
    margin-right: 10px;
}

.el-loading-spinner *{
    font-size:16px !important;
}