* {
    box-sizing:border-box;
}

.body{
    margin:0;
    overflow:hidden;
}

.face{
    position:absolute;
    width:120px;
}

@keyframes float1{
    0%{
        transform:translate(0,0) rotate(360deg) scale(1);
    }
    25%{
        transform:translate(150px,80px) scale(1.2);
    }
    50%{
        transform:translate(-200px,180px) scale(1);
    }
    75%{
        transform:translate(120px,-150px) scale(1.1);
    }
    100%{
        transform:translate(0,0) rotate(360deg) scale(1);
    }
}

@keyframes float2{
    0%{
        transform:translate(0,0) rotate(0deg) scale(2);
    }
    25%{
        transform:translate(150px,80px) scale(1.4);
    }
    50%{
        transform:translate(-200px,180px) scale(6);
    }
    75%{
        transform:translate(120px,-150px) scale(1.2);
    }
    100%{
        transform:translate(0,0) rotate(360deg) scale(1);
    }
}

@keyframes float3{
    0%{
        transform:translate(0,0) rotate(0deg);
    }
    25%{
        transform:translate(200px,-90px);
    }
    50%{
        transform:translate(-150px,220px) rotate(360deg);
    }
    75%{
        transform:translate(130px,160px);
    }
    100%{
        transform:translate(0,0);
    }
}

@keyframes float4{
    0%{
        transform:translate(0,0) scale(5);
    }
    25%{
        transform:translate(-220px,-100px);
        opacity:0.5;
    }
    50%{
        transform:translate(180px,240px);
        opacity:0;
    }
    75%{
        transform:translate(-140px,120px) scale(4);
    }
    100%{
        transform:translate(0,0);
    }
}

@keyframes float5{
    0%{
        transform:translate(0,0) scale(5);
    }
    25%{
        transform:translate(170px,140px) scale(4);
    }
    50%{
        transform:translate(-190px,-180px);
        opacity:0;
    }
    75%{
        transform:translate(150px,200px);
        opacity:0;
    }
    100%{
        transform:translate(0,0) scale(6);
    }
}

@keyframes float6{
    0%{
        transform:translate(0,0) scale(1);
        
    }
    25%{
        transform:translate(-160px,200px) scale(1.3);
    }
    50%{
        transform:translate(210px,-150px) scale(2);
    }
    75%{
        transform:translate(-120px,170px) scale(1.3);
    }
    100%{
        transform:translate(0,0) scale (1);
        
    }
}

@keyframes float7{
    0%{
        transform:translate(0,0) scale(4);
    }
    25%{
        transform:translate(190px,-130px) scale(4.8);
    }
    50%{
        transform:translate(-170px,210px) scale(5.2);
    }
    75%{
        transform:translate(140px,-160px) scale(4.8);
    }
    100%{
        transform:translate(0,0) scale(4);
    }
}

@keyframes float8{
    0%{
        transform:translate(0,0) scale(3);
        opacity:0;
    }
    25%{
        transform:translate(-200px,150px) scale(3.5);
    }
    50%{
        transform:translate(160px,-200px) scale(4);
    }
    75%{
        transform:translate(-130px,180px) scale(3.5);
    }
    100%{
        transform:translate(0,0) scale(3);
        opacity:0;
    }
}

@keyframes float9{
    0%{
        transform:translate(0,0) scale(1);
    }
    25%{
        transform:translate(210px,110px) scale(1.5);
    }
    50%{
        transform:translate(-220px,190px) scale(6);
    }
    75%{
        transform:translate(100px,-170px) scale(1.5);
    }
    100%{
        transform:translate(0,0) scale(1);
    }
}

@keyframes float10{
    0%{
        transform:translate(0,0) rotate(0deg) scale(1);
    }
    25%{
        transform:translate(150px,80px) rotate(90deg) scale(1.4);
    }
    50%{
        transform:translate(-200px,180px) rotate(180deg) scale(1.6);
    }
    75%{
        transform:translate(120px,-150px) scale(1.4);
    }
    100%{
        transform:translate(0,0) rotate(360deg) scale(1);
    }
}

@keyframes float11{
    0%{
        transform:translate(0,0);
    }
    25%{
        transform:translate(180px,160px);
        opacity:0;
    }
    50%{
        transform:translate(-210px,-190px);
    }
    75%{
        transform:translate(130px,220px);
    }
    100%{
        transform:translate(0,0);
    }
}

@keyframes float12{
    0%{
        transform:translate(0,0) scale(6);
    }
    25%{
        transform:translate(-230px,100px) scale(8);
    }
    50%{
        transform:translate(170px,240px) scale(10);
        opacity:0;
    }
    75%{
        transform:translate(-140px,-150px) scale(8);
    }
    100%{
        transform:translate(0,0) scale (6);
    }
}

@keyframes float13{
    0%{
        transform:translate(0,0);
    }
    25%{
        transform:translate(160px,-180px);
    }
    50%{
        transform:translate(-200px,160px);
        opacity:0.5;
    }
    75%{
        transform:translate(180px,120px);
        opacity:0.5;
    }
    100%{
        transform:translate(0,0);
        opacity:0;
    }
}

@keyframes float14{
    0%{
        transform:translate(0,0);
    }
    25%{
        transform:translate(-170px,130px) scale(4);
    }
    50%{
        transform:translate(200px,-210px);
        opacity:0;
    }
    75%{
        transform:translate(-150px,170px) scale(4);
    }
    100%{
        transform:translate(0,0);
        opacity:0;
    }
}

.face1{
    top:5%;
    left:5%;
    animation:float1 8s infinite ease-in-out;
}

.face2{
    top:5%;
    left:30%;
    animation:float2 8s infinite ease-in-out;
}

.face3{
    top:5%;
    left:55%;
    animation:float3 8s infinite ease-in-out;
}

.face4{
    top:5%;
    left:80%;
    animation:float4 8s infinite ease-in-out;
}

.face5{
    top:30%;
    left:10%;
    animation:float5 8s infinite ease-in-out;
}

.face6{
    top:30%;
    left:35%;
    animation:float6 8s infinite ease-in-out;
}

.face7{
    top:30%;
    left:60%;
    animation:float7 8s infinite ease-in-out;
}

.face8{
    top:30%;
    left:85%;
    animation:float8 8s infinite ease-in-out;
}

.face9{
    top:60%;
    left:5%;
    animation:float9 8s infinite ease-in-out;
}

.face10{
    top:60%;
    left:30%;
    animation:float10 8s infinite ease-in-out;
}

.face11{
    top:60%;
    left:55%;
    animation:float11 8s infinite ease-in-out;
}

.face12{
    top:60%;
    left:80%;
    animation:float12 5s infinite ease-in-out;
}

.face13{
    top:85%;
    left:20%;
    animation:float13 8s infinite ease-in-out;
}

.face14{
    top:85%;
    left:65%;
    animation:float14 8s infinite ease-in-out;
}