* {
    box-sizing: border-box;
}

body {
    background: black;
}

.canvas {
    width: 900px;
    height: 556px;
    margin: 100px auto;
    background: #fdcbdb;
    position: relative;
}

#ball {
    width: 200px;
    height: 200px;
    background: #ffffff;
    margin-left: 370px;
    margin-top: 235px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    position: absolute;
-webkit-box-shadow: 0px 6px 13px 0px rgba(0,0,0,0.31);
-moz-box-shadow: 0px 6px 13px 0px rgba(0,0,0,0.31);
box-shadow: 0px 6px 13px 0px rgba(0,0,0,0.31);
    z-index:1;
    background: rgba(245,245,245,1);
background: -moz-linear-gradient(left, rgba(245,245,245,1) 0%, rgba(237,237,237,1) 0%, rgba(227,227,227,1) 0%, rgba(255,255,255,1) 73%, rgba(255,255,255,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(245,245,245,1)), color-stop(0%, rgba(237,237,237,1)), color-stop(0%, rgba(227,227,227,1)), color-stop(73%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,1)));
background: -webkit-linear-gradient(left, rgba(245,245,245,1) 0%, rgba(237,237,237,1) 0%, rgba(227,227,227,1) 0%, rgba(255,255,255,1) 73%, rgba(255,255,255,1) 100%);
background: -o-linear-gradient(left, rgba(245,245,245,1) 0%, rgba(237,237,237,1) 0%, rgba(227,227,227,1) 0%, rgba(255,255,255,1) 73%, rgba(255,255,255,1) 100%);
background: -ms-linear-gradient(left, rgba(245,245,245,1) 0%, rgba(237,237,237,1) 0%, rgba(227,227,227,1) 0%, rgba(255,255,255,1) 73%, rgba(255,255,255,1) 100%);
background: linear-gradient(to right, rgba(245,245,245,1) 0%, rgba(237,237,237,1) 0%, rgba(227,227,227,1) 0%, rgba(255,255,255,1) 73%, rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#ffffff', GradientType=1 );
}

#pumpkin1 {
    width: 100px;
    height: 100px;
    background: #ffa85a;
    margin-left: 625px;
    margin-top: 320px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 100px;
    position: absolute;
    z-index:1;
    -webkit-box-shadow: 0px 6px 13px 0px rgba(0,0,0,0.31);
-moz-box-shadow: 0px 6px 13px 0px rgba(0,0,0,0.31);
box-shadow: 0px 6px 13px 0px rgba(0,0,0,0.31);
background: rgba(255,146,10,1);
background: -moz-linear-gradient(left, rgba(255,146,10,1) 0%, rgba(255,175,75,1) 27%, rgba(255,226,191,1) 77%, rgba(255,226,191,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,146,10,1)), color-stop(27%, rgba(255,175,75,1)), color-stop(77%, rgba(255,226,191,1)), color-stop(100%, rgba(255,226,191,1)));
background: -webkit-linear-gradient(left, rgba(255,146,10,1) 0%, rgba(255,175,75,1) 27%, rgba(255,226,191,1) 77%, rgba(255,226,191,1) 100%);
background: -o-linear-gradient(left, rgba(255,146,10,1) 0%, rgba(255,175,75,1) 27%, rgba(255,226,191,1) 77%, rgba(255,226,191,1) 100%);
background: -ms-linear-gradient(left, rgba(255,146,10,1) 0%, rgba(255,175,75,1) 27%, rgba(255,226,191,1) 77%, rgba(255,226,191,1) 100%);
background: linear-gradient(to right, rgba(255,146,10,1) 0%, rgba(255,175,75,1) 27%, rgba(255,226,191,1) 77%, rgba(255,226,191,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff920a', endColorstr='#ffe2bf', GradientType=1 );
}

#pumpkin2 {
    width: 50px;
    height: 50px;
    background: #ffa85a;
    margin-left: 620px;
    margin-top: 315px;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    border-radius: 100px;
    position: absolute; 
    z-index:0;
}

#vase {
    width: 70px;
    height: 150px;
    background: #c9c9c9;
    margin-left: 220px;
    margin-top: 285px;
    border-radius: 20px 20px;
    position: absolute; 
    z-index: 5;
    -webkit-box-shadow: 0px 6px 13px 0px rgba(0,0,0,0.31);
-moz-box-shadow: 0px 6px 13px 0px rgba(0,0,0,0.31);
box-shadow: 0px 6px 13px 0px rgba(0,0,0,0.31);
background: rgba(209,209,209,1);
background: -moz-linear-gradient(left, rgba(209,209,209,1) 0%, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 0%, rgba(254,254,254,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(209,209,209,1)), color-stop(0%, rgba(226,226,226,1)), color-stop(0%, rgba(219,219,219,1)), color-stop(100%, rgba(254,254,254,1)));
background: -webkit-linear-gradient(left, rgba(209,209,209,1) 0%, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 0%, rgba(254,254,254,1) 100%);
background: -o-linear-gradient(left, rgba(209,209,209,1) 0%, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 0%, rgba(254,254,254,1) 100%);
background: -ms-linear-gradient(left, rgba(209,209,209,1) 0%, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 0%, rgba(254,254,254,1) 100%);
background: linear-gradient(to right, rgba(209,209,209,1) 0%, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 0%, rgba(254,254,254,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d1d1', endColorstr='#fefefe', GradientType=1 );
}   

#stemright {
    width: 5px;
    height: 70px;
    background: #91dc6f;
    margin-left: 280px;
    margin-top: 225px;
    border-radius: 20px 20px;
    position: absolute; 
    -ms-transform: rotate(12deg); /* IE 9 */
    -webkit-transform: rotate(12deg); /* Chrome, Safari, Opera */
    transform: rotate(12deg);
    z-index: 0;
}       

#stemleft {
    width: 5px;
    height: 70px;
    background: #91dc6f;
    margin-left: 225px;
    margin-top: 225px;
    border-radius: 20px 20px;
    position: absolute; 
    -ms-transform: rotate(-12deg); /* IE 9 */
    -webkit-transform: rotate(-12deg); /* Chrome, Safari, Opera */
    transform: rotate(-12deg);
    z-index: 0;
}   

#stemleftm {
    width: 5px;
    height: 70px;
    background: #91dc6f;
    margin-left: 243px;
    margin-top: 225px;
    border-radius: 20px 20px;
    position: absolute; 
    z-index: 0;
}       

#stemrightm {
    width: 5px;
    height: 70px;
    background: #91dc6f;
    margin-left: 262px;
    margin-top: 225px;
    border-radius: 20px 20px;
    position: absolute; 
    z-index: 0;
}       

#yellowright {
    width: 10px;
    height: 10px;
    background: #fff3bc;
    margin-left: 285px;
    margin-top: 218px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 100px;
    position: absolute; 
    z-index: 6;
}

#yellowrightm {
    width: 10px;
    height: 10px;
    background: #fff3bc;
    margin-left: 259px;
    margin-top: 218px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 100px;
    position: absolute; 
    z-index: 6;
}

#yellowleftm {
    width: 10px;
    height: 10px;
    background: #fff3bc;
    margin-left: 240px;
    margin-top: 218px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 100px;
    position: absolute; 
    z-index: 6;
}

#yellowleft {
    width: 10px;
    height: 10px;
    background: #fff3bc;
    margin-left: 214px;
    margin-top: 218px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 100px;
    position: absolute; 
    z-index: 6;
}


#petalright {
    width: 35px;
    height: 17px;
    margin-left: 275px;
    margin-top: 205px;
    background: #ce9aff;
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
    -ms-transform: rotate(102deg); /* IE 9 */
    -webkit-transform: rotate(102deg); /* Chrome, Safari, Opera */
    transform: rotate(102deg);
    position: absolute;
}

#petalleft {
    width: 35px;
    height: 17px;
    margin-left: 200px;
    margin-top: 205px;
    background: #ce9aff;
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
    -ms-transform: rotate(78deg); /* IE 9 */
    -webkit-transform: rotate(78deg); /* Chrome, Safari, Opera */
    transform: rotate(78deg);
    position: absolute;
}

#petalleftm {
    width: 35px;
    height: 17px;
    margin-left: 227px;
    margin-top: 205px;
    background: #ce9aff;
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
    -ms-transform: rotate(85deg); /* IE 9 */
    -webkit-transform: rotate(85deg); /* Chrome, Safari, Opera */
    transform: rotate(85deg);
    position: absolute;
}


#petalrightm {
    width: 35px;
    height: 17px;
    margin-left: 248px;
    margin-top: 205px;
    background: #ce9aff;
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
    -ms-transform: rotate(95deg); /* IE 9 */
    -webkit-transform: rotate(95deg); /* Chrome, Safari, Opera */
    transform: rotate(95deg);
    position: absolute;
}

#mat {
    width: 600px;
    margin-top: 370px;
    margin-left: 170px;
    border-bottom: 120px solid #89f069;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    position: absolute;
    z-index:0;
}