* {
    margin: 0;
    padding: 0;
}

div {
    width: 100px;
    height: 100px;
    animation-name: yippee;
    animation-duration: 9s;
    animation-iteration-count: infinite;
}

.confetti {
    animation-name: spinnee;
    animation-duration: 9s;
    animation-iteration-count: infinite;
}

@keyframes yippee {
    0% {
        transform: translate(0vh);
    }

    50% {
        transform: translate(80vw);
    }

    100% {
        transform: translate(0vh);
    }
}

@keyframes spinnee {
    0% {
        transform: rotate(0deg) translate(0vh);
    }
    50% {
        transform: rotate(1080deg) translate(250vh);
    }

    100% {
        transform: rotate(0deg) translate(0vh);
    }
}

div {
    position: absolute;
    color: transparent;
}

#body {
    background-color: rgb(241, 241, 241);
    top: 40vh;
    left: 20vh;
    height: 25vh;
    width: 60vh;
    border-radius: 35%;
    border: 1vh solid black;
}

#head {
    background-color: rgb(241, 241, 241);
    top: 0vh;
    left: 0vh;
    height: 50vh;
    width: 50vh;
    border-radius: 100%;
    border: 1vh solid black
}

#left_eye {
    background-color: rgb(0, 0, 0);
    top: 15vh;
    left: 6vh;
    height: 15vh;
    width: 17vh;
    border-radius: 100%;
}

#right_eye {
    background-color: rgb(0, 0, 0);
    top: 15vh;
    left: 30vh;
    height: 15vh;
    width: 17vh;
    border-radius: 100%;
}

#left_shine {
    background-color: rgb(255, 255, 255);
    top: 17vh;
    left: 9vh;
    height: 3vh;
    width: 5vh;
    border-radius: 100%;
}

#right_shine {
    background-color: rgb(255, 255, 255);
    top: 17vh;
    left: 33vh;
    height: 3vh;
    width: 5vh;
    border-radius: 100%;
}

#mouth {
    background-color: rgb(0, 0, 0);
    top: 35vh;
    left: 20vh;
    height: 2vh;
    width: 10vh;
    border-radius: 0%;
}

#foot1 {
    background-color: rgb(241, 241, 241);
    top: 50vh;
    left: 20vh;
    height: 30vh;
    width: 15vh;
    border-radius: 30%;
    border: 1vh solid black;
}

#foot2 {
    background-color: rgb(241, 241, 241);
    top: 50vh;
    left: 38vh;
    height: 30vh;
    width: 15vh;
    border-radius: 30%;
    border: 1vh solid black;
}

#foot3 {
    background-color: rgb(241, 241, 241);
    top: 50vh;
    left: 65vh;
    height: 30vh;
    width: 15vh;
    border-radius: 30%;
    border: 1vh solid black;
}

#foot4 {
    background-color: rgb(241, 241, 241);
    top: 47vh;
    left: 45vh;
    height: 30vh;
    width: 15vh;
    border-radius: 30%;
    border: 1vh solid black;
}

#outlinecover {
    background-color: rgb(241, 241, 241);
    top: 45vh;
    left: 23vh;
    height: 20vh;
    width: 56vh;
    border-radius: 10%;
}

#outlinecover2 {
    background-color: rgb(241, 241, 241);
    top: 45vh;
    left: 21vh;
    height: 20vh;
    width: 10vh;
    border-radius: 10%;
}

#outlinecover3 {
    background-color: rgb(241, 241, 241);
    top: 46vh;
    left: 71vh;
    height: 20vh;
    width: 10vh;
    border-radius: 21%;
}

#confetti {
    background-color: red;
    top: 1vh;
    left: 71vh;
    height: 10vh;
    width: 5vh;
    border-radius: 21%;
}

#confetti2 {
    background-color: blue;
    top: 1vh;
    left: 1vh;
    height: 10vh;
    width: 5vh;
    border-radius: 21%;
}

#confetti3 {
    background-color: green;
    top: 40vh;
    left: 1vh;
    height: 10vh;
    width: 5vh;
    border-radius: 21%;
}

#confetti4 {
    background-color: yellow;
    top: 15vh;
    left: 60vh;
    height: 10vh;
    width: 5vh;
    border-radius: 21%;
}

#confetti5 {
    background-color: purple;
    top: 15vh;
    left: 89vh;
    height: 10vh;
    width: 5vh;
    border-radius: 21%;
}

#confetti6 {
    background-color: rgb(164, 241, 255);
    top: 30vh;
    left: 69vh;
    height: 10vh;
    width: 5vh;
    border-radius: 21%;
}