.main .points {
    z-index: 2
}

.main .points {
    overflow: hidden;
    width: 100%;
    position: absolute;
    height: 1200px;
    /* z-index: 0 */
}


.point-floating-1 {
    background-color: #eef7f7;
    height: 10px;
    width: 10px;
    position: relative;
    -webkit-animation-name: p1;
    -webkit-animation-duration: 80s;
    -webkit-animation-iteration-count: infinite;
    animation-name: p1;
    animation-duration: 80s;
    animation-iteration-count: infinite
}

.point-floating-2 {
    background-color: green;
    height: 10px;
    width: 10px;
    position: relative;
    -webkit-animation-name: p2;
    -webkit-animation-duration: 90s;
    -webkit-animation-iteration-count: infinite;
    animation-name: p2;
    animation-duration: 90s;
    animation-iteration-count: infinite
}

.point-floating-3 {
    background-color: orange;
    height: 5px;
    width: 5px;
    position: relative;
    -webkit-animation-name: p3;
    -webkit-animation-duration: 80s;
    -webkit-animation-iteration-count: infinite;
    animation-name: p3;
    animation-duration: 80s;
    animation-iteration-count: infinite
}

.point-floating-4 {
    background-color: pink;
    height: 8px;
    width: 8px;
    position: relative;
    -webkit-animation-name: p4;
    -webkit-animation-duration: 80s;
    -webkit-animation-iteration-count: infinite;
    animation-name: p4;
    animation-duration: 80s;
    animation-iteration-count: infinite
}

.point-floating-5 {
    background-color: #ffc64c;
    height: 8px;
    width: 8px;
    position: relative;
    -webkit-animation-name: p5;
    -webkit-animation-duration: 50s;
    -webkit-animation-iteration-count: infinite;
    animation-name: p5;
    animation-duration: 50s;
    animation-iteration-count: infinite
}

.point-floating-6 {
    background-color: #ffc64c;
    height: 8px;
    width: 8px;
    position: relative;
    -webkit-animation-name: p6;
    -webkit-animation-duration: 70s;
    -webkit-animation-iteration-count: infinite;
    animation-name: p6;
    animation-duration: 70s;
    animation-iteration-count: infinite
}

.point-floating-7 {
    background-color: orange;
    height: 10px;
    width: 10px;
    position: relative;
    -webkit-animation-name: p7;
    -webkit-animation-duration: 70s;
    -webkit-animation-iteration-count: infinite;
    animation-name: p7;
    animation-duration: 70s;
    animation-iteration-count: infinite
}

.point-floating-8 {
    background-color: purple;
    height: 6px;
    width: 6px;
    position: relative;
    -webkit-animation-name: p8;
    -webkit-animation-duration: 50s;
    -webkit-animation-iteration-count: infinite;
    animation-name: p8;
    animation-duration: 50s;
    animation-iteration-count: infinite
}

.point-floating-9 {
    background-color: purple;
    height: 12px;
    width: 12px;
    position: relative;
    -webkit-animation-name: p9;
    -webkit-animation-duration: 100s;
    -webkit-animation-iteration-count: infinite;
    animation-name: p9;
    animation-duration: 100s;
    animation-iteration-count: infinite
}

@-webkit-keyframes p1 {
    0% {
        left: 0px;
        top: 0px
    }

    50% {
        left: 0;
        top: 800px
    }

    100% {
        left: 0px;
        top: 0px
    }
}

@keyframes p1 {
    0% {
        left: 800px;
        top: 0px
    }

    50% {
        left: 0px;
        top: 800px
    }

    100% {
        left: 800px;
        top: 0px
    }
}

@-webkit-keyframes p2 {
    0% {
        left: 0;
        top: 100px
    }

    50% {
        left: 0;
        top: 800px
    }

    100% {
        left: 0;
        top: 100px
    }
}

@keyframes p2 {
    0% {
        left: 0;
        top: 100px
    }

    50% {
        left: 0px;
        top: 800px
    }

    100% {
        left: 0;
        top: 100px
    }
}

@-webkit-keyframes p3 {
    0% {
        left: 300px;
        top: 900px
    }

    50% {
        left: 500px;
        top: 0px
    }

    100% {
        left: 300px;
        top: 900px
    }
}

@keyframes p3 {
    0% {
        left: 300px;
        top: 900px
    }

    50% {
        left: 500px;
        top: 0px
    }

    100% {
        left: 300px;
        top: 900px
    }
}

@-webkit-keyframes p4 {
    0% {
        left: 1000px;
        top: 500px
    }

    50% {
        left: 00px;
        top: 500px
    }

    100% {
        left: 1000px;
        top: 500px
    }
}

@keyframes p4 {
    0% {
        left: 1000px;
        top: 500px
    }

    50% {
        left: 0px;
        top: 500px
    }

    100% {
        left: 1000px;
        top: 500px
    }
}

@-webkit-keyframes p5 {
    0% {
        left: 500px;
        top: 1000px
    }

    50% {
        left: 50%;
        top: 0px
    }

    100% {
        left: 500px;
        top: 1000px
    }
}

@keyframes p5 {
    0% {
        left: 500px;
        top: 1000px
    }

    50% {
        left: 50%;
        top: 0px
    }

    100% {
        left: 500px;
        top: 1000px
    }
}

@-webkit-keyframes p6 {
    0% {
        left: 500px;
        top: 200px
    }

    50% {
        left: 50%;
        top: 70%
    }

    100% {
        left: 500px;
        top: 200px
    }
}

@keyframes p6 {
    0% {
        left: 500px;
        top: 200px
    }

    50% {
        left: 50%;
        top: 70%
    }

    100% {
        left: 500px;
        top: 200px
    }
}

@-webkit-keyframes p7 {
    0% {
        left: 50px;
        top: 10%
    }

    50% {
        left: 50%;
        top: 10%
    }

    100% {
        left: 50px;
        top: 10%
    }
}

@keyframes p7 {
    0% {
        left: 50px;
        top: 10%
    }

    50% {
        left: 50%;
        top: 10%
    }

    100% {
        left: 50px;
        top: 10%
    }
}

@-webkit-keyframes p8 {
    0% {
        left: 0;
        top: 20%
    }

    50% {
        left: 50%;
        top: 20%
    }

    100% {
        left: 0;
        top: 20%
    }
}

@keyframes p8 {
    0% {
        left: 0;
        top: 20%
    }

    50% {
        left: 50%;
        top: 20%
    }

    100% {
        left: 0;
        top: 20%
    }
}

@-webkit-keyframes p9 {
    0% {
        left: 1000px;
        top: 100px
    }

    50% {
        left: 500px;
        top: 950px
    }

    100% {
        left: 1000px;
        top: 100px
    }
}

@keyframes p9 {
    0% {
        left: 1000px;
        top: 100px
    }

    50% {
        left: 500px;
        top: 950px
    }

    100% {
        left: 1000px;
        top: 100px
    }
}

.point {
    border-radius: 50%;
    z-index: 999;
    position: absolute
}