* {
    box-sizing: border-box;
}

body{
    margin: 0;
    background-color: rgb(0, 0, 0);
}

.smiley{
    position: fixed;
    background-color: rgb(220, 185, 253);
    border: 5px solid rgb(0, 255, 55);
    width: 600px;
    height: 500px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    filter: blur(9px); 
    animation: face 2s infinite alternate;
}
.eye{
    position: absolute;
    background:rgb(0, 255, 55);
    border: 1px solid purple;
    width: 70px;
    height: 70px;
    top: 80px;
    border-radius: 50%;
}

.left{
    left: 80px;
}

.right{
    right: 80px;
}

.mouth{
    background:rgb(0, 255, 55);
    border: 1px solid purple;
    width:50%;
    height:60px;
    left: 25%;
    right: 0;
    bottom: 80px;
    position: absolute;
}

.floater{
    background: blue;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    animation: floater 2s infinite alternate,
                scale 1s -2s infinite alternate;
                
}
.spin{
    animation: spin 3s -2s infinite linear;
                
}

.floater2{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    animation: floater2 2s infinite alternate,
                scale2 1s -3s infinite alternate;
                
}
.spin2{
    animation: spin2 3s -1s infinite linear;
                
}

.floater3{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    animation: floater3 1s infinite alternate,
                scale3 1s infinite alternate;
                
}
.spin3{
    animation: spin3 3s infinite linear;
                
}

.floater4{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    animation: floater3 1s infinite reverse,
                scale3 1s infinite reverse;
                
}
.spin4{
    animation: spin3 3s infinite linear reverse;
                
}

.floater5{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    animation: floater3 1s 1s infinite reverse,
                scale3 1s infinite reverse;
                
}
.spin5{
    animation: spin3 3s 1s infinite linear reverse;
                
}

@keyframes face{
    0% {
        background-color: rgb(220, 185, 253);
        
    }
    100% {
        background-color: blue;
        
    }
}

@keyframes floater{
    0%{
        background-color:red;
        top: 0vh;
        left: 0vw;
    }

    50%{
        background-color: yellow;
    }

    100%{
        background: blue;
        top: 70vh;
        left: 70vw;
    }
}

@keyframes scale {
    0%{ 
        transform: scale(1);
    }
    100%{
        transform: scale(1.5);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0);
       
    }
    100% {
        transform: rotate(360deg)
    }
}

@keyframes floater2{
    0%{
        background-color: blue;
        top: 0vh;
        left: 0vw;
    }

    50%{
        background-color: yellow;
    }

    100%{
        background: red;
        top: 70vh;
        left: 70vw;
    }
}

@keyframes scale2 {
    0%{ 
        transform: scale(1);
    }
    100%{
        transform: scale(1.5);
    }
}

@keyframes spin2 {
    0% {
        transform: rotate(0);
       
    }
    100% {
        transform: rotate(360deg)
    }
}

@keyframes floater3{
    0%{
        background-color: blue;
        top: 0vh;
        left: 0vw;
    }

    50%{
        background-color: yellow;
    }

    100%{
        background: red;
        top: 70vh;
        left: 70vw;
    }
}

@keyframes scale3 {
    0%{ 
        transform: scale(1);
    }
    100%{
        transform: scale(1.5);
    }
}

@keyframes spin3 {
    0% {
        transform: rotate(0);
       
    }
    100% {
        transform: rotate(360deg)
    }
}

@keyframes floater4{
    0%{
        background-color: yellow;
        top: 0vh;
        left: 0vw;
    }

    50%{
        background-color:blue;
    }

    100%{
        background: rgb(255, 0, 0);
        top: 70vh;
        left: 70vw;
    }
}

@keyframes scale4 {
    0%{ 
        transform: scale(1);
    }
    100%{
        transform: scale(1.5);
    }
}

@keyframes spin4 {
    0% {
        transform: rotate(0);
       
    }
    100% {
        transform: rotate(360deg)
    }
}

@keyframes floater5 {
    0%{
        background-color: blue;
        top: 0vh;
        left: 0vw;
    }

    50%{
        background-color: yellow;
    }

    100%{
        background: rgb(255, 0, 0);
        top: 70vh;
        left: 70vw;
    }
}

@keyframes scale5 {
    0%{ 
        transform: scale(1);
    }
    100%{
        transform: scale(1.5);
    }
}

@keyframes spin5 {
    0% {
        transform: rotate(0);
       
    }
    100% {
        transform: rotate(360deg)
    }
}