* {
    box-sizing: border-box;
}

body {
    background: black;
}

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

.vasefigure {
    top: -30px;
    left: 60px;
    position: absolute;
}

#flower1 {
    border-right: 20px solid transparent;
  border-top: 20px solid #ccccff;
  border-left: 20px solid #ccccff;
  border-bottom: 20px solid #ccccff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
    border-radius: 10px;
    top: 160px;
    left: 260px;
    position: absolute;
    -ms-transform: rotate(-50deg);
    -webkit-transform: rotate(-50deg);
    transform: rotate(-50deg);

}

#flower2 {
    border-right: 20px solid transparent;
  border-top: 20px solid #ccccff;
  border-left: 20px solid #ccccff;
  border-bottom: 20px solid #ccccff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-leftradius: 20px;
  border-bottom-right-radius: 20px;
    border-radius: 10px;
    top: 155px;
    left: 190px;
    position: absolute;
    -ms-transform: rotate(-80deg);
    -webkit-transform: rotate(-80deg);
    transform: rotate(-80deg);

}

#flower3 {
    border-right: 20px solid transparent;
  border-top: 20px solid #ccccff;
  border-left: 20px solid #ccccff;
  border-bottom: 20px solid #ccccff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
    border-radius: 10px;
    top: 165px;
    left: 215px;
    position: absolute;
    -ms-transform: rotate(-100deg);
    -webkit-transform: rotate(-100deg);
    transform: rotate(-100deg);

}
#flower4 {
    border-right: 20px solid transparent;
  border-top: 20px solid #ccccff;
  border-left: 20px solid #ccccff;
  border-bottom: 20px solid #ccccff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
    border-radius: 10px;
    top: 165px;
    left: 155px;
    position: absolute;
    -ms-transform: rotate(-100deg);
    -webkit-transform: rotate(-100deg);
    transform: rotate(-100deg);

}

#vase {
    width: 100px;
    height: 150px;
    top: 230px;
    left: 170px;
    border-radius: 10px;
    background: white;
    position: absolute;
    opacity: 0.6;
    background-url: http://api.thumbr.it/whitenoise-361x370.png?background=ffffffff&noise=cccccc&density=32&opacity=32

}

#vasewater {
    width: 90px;
    height: 100px;
    top: 275px;
    left: 175px;
    border-radius: 10px;
    background: #ccffff;
    position: absolute;
    opacity:0.9;
    background: rgba(245,252,255,1);
background: -moz-linear-gradient(top, rgba(245,252,255,1) 0%, rgba(245,252,255,0.95) 24%, rgba(113,206,239,0.87) 62%, rgba(33,180,226,0.81) 91%, rgba(183,222,237,0.79) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(245,252,255,1)), color-stop(24%, rgba(245,252,255,0.95)), color-stop(62%, rgba(113,206,239,0.87)), color-stop(91%, rgba(33,180,226,0.81)), color-stop(100%, rgba(183,222,237,0.79)));
background: -webkit-linear-gradient(top, rgba(245,252,255,1) 0%, rgba(245,252,255,0.95) 24%, rgba(113,206,239,0.87) 62%, rgba(33,180,226,0.81) 91%, rgba(183,222,237,0.79) 100%);
background: -o-linear-gradient(top, rgba(245,252,255,1) 0%, rgba(245,252,255,0.95) 24%, rgba(113,206,239,0.87) 62%, rgba(33,180,226,0.81) 91%, rgba(183,222,237,0.79) 100%);
background: -ms-linear-gradient(top, rgba(245,252,255,1) 0%, rgba(245,252,255,0.95) 24%, rgba(113,206,239,0.87) 62%, rgba(33,180,226,0.81) 91%, rgba(183,222,237,0.79) 100%);
background: linear-gradient(to bottom, rgba(245,252,255,1) 0%, rgba(245,252,255,0.95) 24%, rgba(113,206,239,0.87) 62%, rgba(33,180,226,0.81) 91%, rgba(183,222,237,0.79) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5fcff', endColorstr='#b7deed', GradientType=0 );

}

#stem1 {
    width: 10px;
    height: 185px;
    background: green;
    top: 187px;
    left: 185px;
    position: absolute;
    -ms-transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
}
#stem2 {
    width: 10px;
    height: 185px;
    background: green;
    top: 187px;
    left: 203px;
    position: absolute;
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
#stem3 {
    width: 10px;
    height: 185px;
    background: green;
    top: 187px;
    left: 223px;
    position: absolute;
    -ms-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
}
#stem4 {
    width: 10px;
    height: 185px;
    background: green;
    top: 187px;
    left: 243px;
    position: absolute;
    -ms-transform: rotate(14deg);
    -webkit-transform: rotate(14deg);
    transform: rotate(14deg);
}

#circle {
    width: 200px;
    height: 200px;
    top: 200px;
    left: 340px;
background: rgba(226,226,226,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 49%, rgba(209,209,209,1) 62%, rgba(254,254,254,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(226,226,226,1)), color-stop(49%, rgba(219,219,219,1)), color-stop(62%, rgba(209,209,209,1)), color-stop(100%, rgba(254,254,254,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 49%, rgba(209,209,209,1) 62%, rgba(254,254,254,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 49%, rgba(209,209,209,1) 62%, rgba(254,254,254,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 49%, rgba(209,209,209,1) 62%, rgba(254,254,254,1) 100%);
background: radial-gradient(ellipse at center, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 49%, rgba(209,209,209,1) 62%, rgba(254,254,254,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe', GradientType=1 );
    border-radius: 500px;
    position: absolute;
    -webkit-box-shadow: 1px 68px 82px -61px rgba(0,0,0,0.75);
-moz-box-shadow: 1px 68px 82px -61px rgba(0,0,0,0.75);
box-shadow: 1px 68px 82px -61px rgba(0,0,0,0.75);
}

#pumpkin {
    width: 120px;
    height: 110px;
    top: 320px;
    left: 525px;
    border-radius: 500px;
    position: absolute;
    background: rgba(255,223,184,1);
background: -moz-linear-gradient(top, rgba(255,223,184,1) 0%, rgba(255,146,10,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,223,184,1)), color-stop(100%, rgba(255,146,10,1)));
background: -webkit-linear-gradient(top, rgba(255,223,184,1) 0%, rgba(255,146,10,1) 100%);
background: -o-linear-gradient(top, rgba(255,223,184,1) 0%, rgba(255,146,10,1) 100%);
background: -ms-linear-gradient(top, rgba(255,223,184,1) 0%, rgba(255,146,10,1) 100%);
background: linear-gradient(to bottom, rgba(255,223,184,1) 0%, rgba(255,146,10,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffdfb8', endColorstr='#ff920a', GradientType=0 );
-webkit-box-shadow: 1px 68px 82px -61px rgba(0,0,0,0.75);
-moz-box-shadow: 1px 68px 82px -61px rgba(0,0,0,0.75);
box-shadow: 1px 68px 82px -61px rgba(0,0,0,0.75);

}

#mat {
    top: 300px;
    left: 90px;
    border-bottom: 150px solid #00ff00;
    border-left: 110px solid transparent;
    border-right: 120px solid transparent;
    height: 0;
    width: 700px;
    position: absolute;


}