body {
    margin:0;
    padding:0;
    background-color:#702050;
}
.canvas{
    display:inline;
}
.flower{
    width:15px;
    height:15px;
    border-radius:50%;
    z-index:1;
    position:absolute;
    top:-20%;
}
.petal{
    width:15px;
    height:15px;
    border-radius:50%;
    z-index:-1;
}
.petal1{
    position:relative;
    left:-70%; top:20%;
}
.petal2{
    position:relative;
    top:-18%; left:-5%;
}
.petal3{
    position:relative;
    top:-170%; left:72%;
}
.petal4{
    position:relative;
    top:-363%; left:-30%;
}
.petal5{
    position:relative;
    top:-450%; left:53%;
}

#flower1{
    background-color:yellow;
    position:absolute;
    left:8%;
    animation-name:rain;
    animation-duration:7s;
    animation-iteration-count:infinite;
    animation-timing-function:linear;
}
.f1p{
    background-color:pink;
}

#flower2{
    background-color:orange;
    position:absolute;
    left:25%;
    animation-name:rain;
    animation-duration:4s;
    animation-iteration-count:infinite;
    animation-timing-function:linear;
    animation-delay:1.5s;
}
.f2p{
    background-color:yellow;
}
#flower3{
    background-color:red;
    position:absolute;
    left:42%;
    animation-name:rain;
    animation-duration:10s;
    animation-iteration-count:infinite;
    animation-timing-function:linear;
    animation-delay:0s;
}
.f3p{
    background-color:skyblue;
}
#flower4{
    background-color:cyan;
    position:absolute;
    left:59%;
    animation-name:rain;
    animation-duration:7s;
    animation-iteration-count:infinite;
    animation-timing-function:linear;
    animation-delay:2.5s;
}
.f4p{
    background-color:blue;
}

#flower5{
    background-color:green;
    position:absolute;
    left:75%;
    animation-name:rain;
    animation-duration:10s;
    animation-iteration-count:infinite;
    animation-timing-function:ease-out;
    animation-delay:3s;
}
.f5p{
    background-color:lightgreen;
}

#flower6{
    background-color:magenta;
    position:absolute;
    left:90%;
    animation-name:rain;
    animation-duration:8s;
    animation-iteration-count:infinite;
    animation-timing-function:ease-in;
    animation-delay:0s;
}
.f6p{
    background-color:turquoise;
}
@keyframes rain{
    0%{transform:rotate(0deg);
       top:-10%;
    }
    100%{transform:rotate(720deg);
         top:120vh;
    }
}