.particle{

    position:absolute;

    width:6px;
    height:6px;

    background:#00d9ff;

    border-radius:50%;

    opacity:.6;

    animation:

    particleFloat 8s ease-in-out infinite,

    particlePulse 4s ease-in-out infinite;

}
/.p1{

    width:5px;
    height:5px;

    top:18%;
    right:12%;

    animation-delay:0s;

}

.p2{

    width:8px;
    height:8px;

    top:35%;
    right:22%;

    animation-delay:1s;

}

.p3{

    width:4px;
    height:4px;

    top:52%;
    right:8%;

    animation-delay:2s;

}

.p4{

    width:7px;
    height:7px;

    top:75%;
    right:18%;

    animation-delay:1.5s;

}

.p5{

    width:10px;
    height:10px;

    top:12%;
    right:28%;

    animation-delay:3s;

}

.p6{

    width:5px;
    height:5px;

    top:28%;
    right:4%;

    animation-delay:.5s;

}

.p7{

    width:8px;
    height:8px;

    top:42%;
    right:30%;

    animation-delay:2.5s;

}

.p8{

    width:6px;
    height:6px;

    top:58%;
    right:15%;

    animation-delay:1.2s;

}

.p9{

    width:4px;
    height:4px;

    top:82%;
    right:10%;

    animation-delay:3.5s;

}

.p10{

    width:9px;
    height:9px;

    top:68%;
    right:26%;

    animation-delay:2s;

}