style.css

body {
    background: #f5e8ff;
}

/*Animations*/
@-webkit-keyframes cloud1 {
    from {
        left: 10px;
    }
    to {
        left: 200px;
    }
}

@-webkit-keyframes cloud2 {
    from {
        left: 55px;
    }
    to {
        left: 200px;
    }
}

@-webkit-keyframes cloud3 {
    from {
        left: 100px;
    }
    to {
        left: 250px;
    }
}

@keyframes jump {
    0% {
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    }    
    100% {
        transform: translate3d(0, 20%, 0) scale3d(1, 1, 1);
    }
}

@-webkit-keyframes rotate {
    50% {
        border-radius: 38%;
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    100% {
        border-radius: 45%;
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate {
    50% {
        border-radius: 38%;
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    100% {
        border-radius: 45%;
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes rotate1 {
    50% {
        border-radius: 38%;
        -webkit-transform: translate(-30%, 8%) rotate(180deg);
        transform: translate(-30%, 8%) rotate(180deg);
    }
    100% {
        border-radius: 45%;
        -webkit-transform: translate(-20%, 0%) rotate(360deg);
        transform: translate(-20%, 0%) rotate(360deg);
    }
}

@keyframes rotate1 {
    50% {
        border-radius: 38%;
        -webkit-transform: translate(-30%, 8%) rotate(180deg);
        transform: translate(-30%, 8%) rotate(180deg);
    }
    100% {
        border-radius: 45%;
        -webkit-transform: translate(-20%, 0%) rotate(360deg);
        transform: translate(-20%, 0%) rotate(360deg);
    }
}

@-webkit-keyframes rotate2 {
    50% {
        -webkit-transform: translate(30%, 8%) rotate(180deg);
        transform: translate(30%, 8%) rotate(180deg);
    }
    100% {
        -webkit-transform: translate(20%, 0%) rotate(360deg);
        transform: translate(20%, 0%) rotate(360deg);
    }
}

@keyframes rotate2 {
    50% {
        -webkit-transform: translate(30%, 8%) rotate(180deg);
        transform: translate(30%, 8%) rotate(180deg);
    }
    100% {
        -webkit-transform: translate(20%, 0%) rotate(360deg);
        transform: translate(20%, 0%) rotate(360deg);
    }
}



.circle {
    background: transparent;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    overflow: hidden;
    border: 10px solid #deb02d;
    position: absolute;
    z-index: 25;
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
}

#circle0 {
    background: transparent;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    overflow: hidden;
    border: 10px solid #deb02d;
    position: absolute;
    z-index: 20;
}

#circle1 {

    width: 250px;
    height: 250px;
    left: 115px;
    top: 115px;
    background-color: #8fd5d5;
}

#circle2 {
    border: 10px solid #fff;
    top: 0px;
    width: 230px;
    height: 230px;
    z-index: 21;
    left: 0px;
    -webkit-backface-visibility: hidden;
}

#circle-inner-container {
    position: absolute;
    top: 130px;
}


.container {
    width: 600px;
    height: 600px;
}


.wave-sec {
    position: absolute;
    top: 22px;
    display: flex;
}

.wave-sec-2 {
    top: 38px;
    left: 5px;
}

.wave-sec-3 {
    top: 74px;
}

.wave-sec-4 {
    top: 57px;
}

.wave-container {
    position: relative;
    width: 50px;
    height: 35px;
    margin: 0 auto;
    overflow: hidden;
    display: inline-flex;
}
.wave,
.wave1,
.wave2 {
    position: absolute;
    bottom: -60%;
    width: 50px;
    height: 38px;
    background-color: rgba(15, 191, 255, 0.95);
    border-radius: 45%;
    -webkit-animation: rotate 6s linear infinite;
    animation: rotate 6s linear infinite;
}

.wave1 {
    background-color: rgba(15, 191, 255, 0.94);
    -webkit-transform: translate(-20%, 0) rotate(0deg);
    transform: translate(-20%, 0) rotate(0deg);
    -webkit-animation: rotate1 6s linear -4s infinite;
    animation: rotate1 6s linear -4s infinite;
}

.wave2 {
    background-color: rgba(15, 191, 255, 0.93);
    -webkit-transform: translate(20%, 0) rotate(0deg);
    transform: translate(20%, 0) rotate(0deg);
    -webkit-animation: rotate2 6s linear -2s infinite;
    animation: rotate2 6s linear -2s infinite;
}


.flower-of-life {
    margin: 50px auto 0;
    font-size: 100px;
    width: 500px;
    height: 500px;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid #fff;
    box-sizing: border-box;
    background-color: #240b25
}

.rectangle {
    width: 350px;
    height: 350px;
    background: #b70606;
    position: absolute;
    top: 75px;
    left: 75px;
}

.rect1 {
    transform: rotate(10deg);
}

.rect2 {
    transform: rotate(20deg);
}

.rect3 {
    transform: rotate(30deg);
}

.rect4 {
    transform: rotate(40deg);
}

.rect5 {
    transform: rotate(50deg);
}

.rect6 {
    transform: rotate(60deg);
}

.rect7 {
    transform: rotate(70deg);
}

.rect8 {
    transform: rotate(80deg);
}

.rect9 {
    transform: rotate(90deg);
}

.rect-circle1 {
    background: #e04e16;
    width: 449px;
    height: 449px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #e04e16;
    position: absolute;
    z-index: 20;
    top: 23px;
    left: 23px;
}

.rectangle1 {
    width: 318px;
    height: 318px;
    background: #bba506;
    position: absolute;
    top: 90px;
    left: 90px;
    z-index: 21;
}

.rect11 {
    transform: rotate(0deg);
}

.rect12 {
    transform: rotate(10deg);
}

.rect13 {
    transform: rotate(20deg);
}

.rect14 {
    transform: rotate(30deg);
}

.rect15 {
    transform: rotate(40deg);
}

.rect16 {
    transform: rotate(50deg);
}

.rect17 {
    transform: rotate(60deg);
}

.rect18 {
    transform: rotate(70deg);
}

.rect19 {
    transform: rotate(80deg);
}

.rect-circle2 {
    background: #c3cc48;
    width: 388px;
    height: 388px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #c3cc48;
    position: absolute;
    z-index: 22;
    top: 53px;
    left: 53px;
}

.rectangle2 {
    width: 275px;
    height: 275px;
    background: white;
    position: absolute;
    top: 111px;
    left: 111px;
    z-index: 23;
}

.rect21 {
    transform: rotate(0deg);
}

.rect22 {
    transform: rotate(10deg);
}

.rect23 {
    transform: rotate(20deg);
}

.rect24 {
    transform: rotate(30deg);
}

.rect25 {
    transform: rotate(40deg);
}

.rect26 {
    transform: rotate(50deg);
}

.rect27 {
    transform: rotate(60deg);
}

.rect28 {
    transform: rotate(70deg);
}

.rect29 {
    transform: rotate(80deg);
}

.rect-circle3 {
    background: #c3cc48;
    width: 328px;
    height: 328px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #c3cc48;
    position: absolute;
    z-index: 24;
    top: 83px;
    left: 83px;
}

.rectangle3 {
    width: 233px;
    height: 233px;
    background: #e04e16;
    position: absolute;
    top: 133px;
    left: 133px;
    z-index: 25;
}

.rect31 {
    transform: rotate(0deg);
}

.rect32 {
    transform: rotate(10deg);
}

.rect33 {
    transform: rotate(20deg);
}

.rect34 {
    transform: rotate(30deg);
}

.rect35 {
    transform: rotate(40deg);
}

.rect36 {
    transform: rotate(50deg);
}

.rect37 {
    transform: rotate(60deg);
}

.rect38 {
    transform: rotate(70deg);
}

.rect39 {
    transform: rotate(80deg);
}

.rect-circle4 {
    background: #b70606;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #b70606;
    position: absolute;
    z-index: 25;
    top: 108px;
    left: 108px;
}

.vanchi {
    position: absolute;
    top: -20px;
    left: 97px;
    height: 40px;
    width: 83px;
    background: transparent;
    border-top-left-radius: 225px 0px;
    border-top-right-radius: 225px 0px;
    border-bottom-right-radius: 375px 205px;
    border-bottom-left-radius: 0 225px;
    border: solid 6px #4e4e4e;
    border-top: none;
    border-left: none;
    margin: 20px;
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
}

.vanchi1 {
    animation: jump 1s linear alternate infinite;
}

.vanchi-inner {
    position: relative;
}

.vanchi2 {
    top: -2px;
    left: 118px;
    animation: jump 3s linear alternate infinite;
}

.vanchi3 {
    top: 14px;
    left: 75px;
    /*transform-origin: 50% 50%;*/
    animation: jump 2s linear alternate infinite;
}

.vanchi-circle0 {

    width: 8px;
    height: 8px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #4e4e4e;
    position: absolute;
    left: -5px;
    top: 38px;
}


.vanchi-circle1 {

    width: 20px;
    height: 20px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #4e4e4e;
    position: absolute;
    left: 69px;
    top: -9px;
}

.vanchi-circle2 {

    width: 12px;
    height: 17px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #4e4e4e;
    position: absolute;
    left: 72px;
    top: 8px;
}

.vanchi-circle-gold-1 {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #f5b439;
    position: absolute;
    left: 74px;
    top: -5px;
}

.vanchi-circle-gold-2 {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #f5b439;
    position: absolute;
    left: 77px;
    top: 13px;
}

.vanchi-circle-gold-3 {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #f5b439;
    position: absolute;
    left: 74px;
    top: 23px;
}

.vanchi-circle-gold-4 {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #f5b439;
    position: absolute;
    left: 62px;
    top: 31px;
}

.umbrella {
    background: #800080;
    height: 16px;
    width: 24px;
    border-radius: 50% 50% 0 0/100% 100% 0 0;
    position: relative;
    position: absolute;
    top: 8px;
}

.umbrella:before,
.umbrella:after {
    content: '';
    position: absolute;
    border-radius: 50% 50% 0 0/100% 100% 0 0;
    top: 0;
    bottom: 0;
    z-index: 2;
}

.umbrella:before {
    left: 17%;
    right: 17%;
    background: #b300b3;
}

.umbrella:after {
    left: 38%;
    right: 38%;
    background: #c0c;
}

.umbrella .curve {
    position: absolute;
    bottom: 0;
    background: #fff;
    border-radius: 50% 50% 0 0/100% 100% 0 0;
    height: 5px;
    z-index: 3;
}

.umbrella .curve.c1,
.umbrella .curve.c5 {
    width: 17%;
}

.umbrella .curve.c2,
.umbrella .curve.c4 {
    width: 21%;
}

.umbrella .curve.c1 {
    left: 0;
}

.umbrella .curve.c2 {
    left: 17%;
}

.umbrella .curve.c3 {
    left: 38%;
    right: 38%;
}

.umbrella .curve.c4 {
    right: 17%;
}

.umbrella .curve.c5 {
    right: 0;
}

.umbrella .cane {
    z-index: 13;
    position: absolute;
    background: #982f2f;
    top: 12px;
    left: 47%;
    right: 48%;
    height: 21px;
    width: 2px;
}

.vanchi1 .umbrella,
.vanchi1 .umbrella:before,
.vanchi1 .umbrella:after {
    background: green;
}

.vanchi2 .umbrella,
.vanchi2 .umbrella:before,
.vanchi2 .umbrella:after {
    background: #cc2020;
}

.sun {
    left: 6px;
    top: -95px;
    width: 70px;
    height: 70px;
    background: #fba23f;
    background-size: 100%;
    background-image: -moz-radial-gradient(rgba(255, 204, 2, 0) 0%, #fcff00 100%);
    background-image: -webkit-radial-gradient(rgba(255, 204, 2, 0) 0%, #fcff00 100%);
    background-image: radial-gradient(rgba(255, 204, 2, 0) 0%, #fcff00 100%);
    box-shadow: 0 0 100px 20px #fcff00;
    -webkit-animation: sun-run 60s linear 0s infinite;
    animation: sun-run 60s linear 0s infinite;
    border-radius: 50%;
    position: absolute;
}

.cloud {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15) inset;
    opacity: 0.7;
}

.cloud:before {
    top: 2px;
    left: 11px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2) inset;
}

.cloud:before,
.cloud:after {
    content: "";
}

.cloud:after {
    top: 9px;
    right: -14px;
    width: 34px;
    height: 11px;
    border-radius: 7.5px;
    box-shadow: 0 -2px 2px rgba(0, 0, 0, 0.2) inset;
}

.cloud,
.cloud:before,
.cloud:after {
    position: absolute;
    background: #fff;
}

.clouds {
    position: absolute;
}

.cloud1 {
    top: -76px;    
    -webkit-animation: cloud1 5s linear infinite;
}

.cloud2 {
    top: -96px;    
    -webkit-animation: cloud2 9s linear infinite;
}

.cloud3 {
    top: -64px;    
    -webkit-animation: cloud3 7s linear infinite;
}

.cloud4 {
    top: -48px;    
    -webkit-animation: cloud1 4s linear infinite;
}