/*body {
	background: #cccccc;
}*/

/* do NOT modify the canvas */

.canvas {
	width: 900px;
	height: 556px;
	/*margin: 100px auto;*/
	background: white;
	position: relative;
}

/* modify the assets below */

/* ground */
#parallelogram {
	width: 290px;
	height: 160px;
	transform: skew(55deg);
	background: #9e9a8a;
	top: 320px;
	left: 155px;
	position: absolute;
}

/* vase */
#circle3 {
	width: 50px;
	height: 210px;
	background: #35c45b;
	border-radius: 200px;
	top: 185px;
	left: 280px;
	position: absolute;
}

/* top vase */
#circle6 {
	width: 50px;
	height: 230px;
	background: #35c45b;
 	opacity: 0.5;
	border-radius: 200px;
	top: 125px;
	left: 280px;
	position: absolute;
}

/* flower stem */
#circle4 {
	width: 7px;
	height: 330px;
	background: #1d7535;
	border-radius: 200px;
	top: 65px;
	left: 300px;
	position: absolute;
}

/* flower stem */
#circle5 {
	width: 7px;
	height: 330px;
	background: #1d7535;
	border-radius: 200px;
	top: 65px;
	left: 312px;
	position: absolute;
}

/* flower stem */
#circle7 {
	width: 7px;
	height: 330px;
	background: #1d7535;
	border-radius: 200px;
	top: 65px;
	left: 290px;
	position: absolute;
}

/* flower stem */
#circle8 {
	width: 7px;
	height: 330px;
	background: #1d7535;
	border-radius: 200px;
	top: 65px;
	left: 282px;
	position: absolute;
}

/* flower stem */
#circle9 {
	width: 7px;
	height: 330px;
	background: #1d7535;
	border-radius: 200px;
	top: 65px;
	left: 320px;
	position: absolute;
}

/* flower petal 1 */
#circle16 {
	width: 20px;
	height: 20px;
	background: yellow;
	border-radius: 200px;
	top: 55px;
	left: 315px;
	position: absolute;
}

/* flower petal 2 */
#circle17 {
	width: 20px;
	height: 20px;
	background: yellow;
	border-radius: 200px;
	top: 60px;
	left: 305px;
	position: absolute;
}

/* flower petal 3 */
#circle18 {
	width: 20px;
	height: 20px;
	background: yellow;
	border-radius: 200px;
	top: 55px;
	left: 295px;
	position: absolute;
}

/* flower petal 4 */
#circle19 {
	width: 20px;
	height: 20px;
	background: yellow;
	border-radius: 200px;
	top: 50px;
	left: 285px;
	position: absolute;
}

/* flower petal 5 */
#circle20 {
	width: 20px;
	height: 20px;
	background: yellow;
	border-radius: 200px;
	top: 57px;
	left: 270px;
	position: absolute;
}


/* pumpkin */
#circle1 {
	width: 200px;
	height: 160px;
	background: rgba(255,184,122,1);
	background: -moz-linear-gradient(top, rgba(255,184,122,1) 0%, rgba(255,119,0,1) 54%, rgba(255,184,122,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,184,122,1)), color-stop(54%, rgba(255,119,0,1)), color-stop(100%, rgba(255,184,122,1)));
	background: -webkit-linear-gradient(top, rgba(255,184,122,1) 0%, rgba(255,119,0,1) 54%, rgba(255,184,122,1) 100%);
	background: -o-linear-gradient(top, rgba(255,184,122,1) 0%, rgba(255,119,0,1) 54%, rgba(255,184,122,1) 100%);
	background: -ms-linear-gradient(top, rgba(255,184,122,1) 0%, rgba(255,119,0,1) 54%, rgba(255,184,122,1) 100%);
	background: linear-gradient(to bottom, rgba(255,184,122,1) 0%, rgba(255,119,0,1) 54%, rgba(255,184,122,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb87a', endColorstr='#ffb87a', GradientType=0 );
	border-radius: 200px;
	top: 260px;
	left: 150px;
	position: absolute;
}

/* squash little */
#circle15 {
	width: 40px;
	height: 30px;
	background: #f0cd32;
	border-radius: 200px;
	top: 335px;
	left: 385px;
	position: absolute;
}

/* squash */
#circle14 {
	width: 90px;
	height: 90px;
	background: rgba(240,158,50,1);
background: -moz-linear-gradient(-45deg, rgba(240,158,50,1) 0%, rgba(240,205,50,1) 25%, rgba(240,158,50,1) 51%, rgba(240,205,50,1) 78%, rgba(240,158,50,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(240,158,50,1)), color-stop(25%, rgba(240,205,50,1)), color-stop(51%, rgba(240,158,50,1)), color-stop(78%, rgba(240,205,50,1)), color-stop(100%, rgba(240,158,50,1)));
background: -webkit-linear-gradient(-45deg, rgba(240,158,50,1) 0%, rgba(240,205,50,1) 25%, rgba(240,158,50,1) 51%, rgba(240,205,50,1) 78%, rgba(240,158,50,1) 100%);
background: -o-linear-gradient(-45deg, rgba(240,158,50,1) 0%, rgba(240,205,50,1) 25%, rgba(240,158,50,1) 51%, rgba(240,205,50,1) 78%, rgba(240,158,50,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(240,158,50,1) 0%, rgba(240,205,50,1) 25%, rgba(240,158,50,1) 51%, rgba(240,205,50,1) 78%, rgba(240,158,50,1) 100%);
background: linear-gradient(135deg, rgba(240,158,50,1) 0%, rgba(240,205,50,1) 25%, rgba(240,158,50,1) 51%, rgba(240,205,50,1) 78%, rgba(240,158,50,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09e32', endColorstr='#f09e32', GradientType=1 );
	border-radius: 200px;
	top: 295px;
	left: 405px;
	position: absolute;
}

/* little pumpkin */
#circle10 {
	width: 95px;
	height: 70px;
	background: #f8fcde;
	border-radius: 200px;
	top: 380px;
	left: 410px;
	position: absolute;
}

/* little pumpkin stem */
#circle11 {
	width: 7px;
	height: 20px;
	background: #7d4f1d;
	border-radius: 200px;
	top: 370px;
	left: 455px;
	position: absolute;
}

/* little pumpkin stem top */
#circle13 {
	width: 10px;
	height: 7px;
	background: #7d4f1d;
	border-radius: 200px;
	top: 370px;
	left: 450px;
	position: absolute;
}


/* pumpkin stem */
#circle12 {
	width: 25px;
	height: 120px;
	background: black;
	border-radius: 200px;
	top: 160px;
	left: 240px;
	position: absolute;
}

/* pumpkin stem top */
#circle2 {
	width: 30px;
	height: 20px;
	background: black;
	border-radius: 200px;
	top: 160px;
	left: 247px;
	position: absolute;
}

@keyframes bounceIn {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  60% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

#circle16 {
  animation-duration: 4s;
  animation-name: bounceIn;
}

#circle17 {
  animation-duration: 2s;
  animation-name: bounceIn;
}

#circle18 {
  animation-duration: 4s;
  animation-name: bounceIn;
}

#circle19 {
  animation-duration: 2s;
  animation-name: bounceIn;
}

#circle20 {
  animation-duration: 4s;
  animation-name: bounceIn;
}