/*body {
	background: #cccccc;
}
*/
/* do NOT modify the canvas */

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

#pumpkin {
	width: 200px;
	height: 170px;
	background: orange;
	border-radius: 200px;
	top: 300px;
	left: 130px;
	position: absolute;
	background: rgba(255,146,10,1);
}

#pumpkin:before,
 #pumpkin:after {
      position: absolute;
      content: "";
      left: 80px;
      width: 130px;
      top:75px;
      height: 70px;
      background: red;
      border-radius: 25px 25px 5px 5px;
      transform: rotate(-45deg);
      transform-origin: 0 100%;
      background: rgba(255,175,75,1);
		background: -webkit-linear-gradient(left, rgba(255,146,10,1) 0%, rgba(255,175,75,1) 80%, rgba(255,146,10,1) 100%, rgba(255,175,75,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf4b', endColorstr='#ff920a', GradientType=1 );
    }
  #pumpkin:after {
      left: 0;
      transform: rotate(45deg);
      transform-origin: 85% 50%;
    }

#pstem {
	width: 40px;
	height: 90px;
	top:250px;
	left:205px;
	position:relative;
	background: brown;
}
 #pstem:after {
 	content:"";
 	position:absolute;
 	left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-top: 25px solid brown;
    border-right: 20px solid rgba(255,175,75,1);
    border-left: 20px solid rgba(255,146,10,1);
 }
 #pstem:before {
 	content: "";
    position: absolute;
    top:0px;
    left:0px;
    bottom: 0;
    width: 0;
    height: 10;
    border-top: 20px solid white;
    border-right: 30px solid transparent;
    border-left: 10px solid transparent;
 }

.fade {
	opacity:0;
}

.fade:hover{
	opacity:1;
}

#eye1 {
	width: 0;
	height: 0;
	position:absolute;
	top:350px;
	left:180px;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-bottom: 30px solid black;
}

#eye2 {
	width: 0;
	height: 0;
	position:absolute;
	top:350px;
	left:250px;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-bottom: 30px solid black;
}

#mouth{
	width: 60px;
	height: 0;
	position:absolute;
	top:410px;
	left:185px;
	border-top: 20px solid black;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
}

#mat{
    width: 450px;
    height: 280px;
    top:210px;
    left:200px;
    position:absolute;
    transform: skew(-35deg);
    background: lightgrey;  
}

#smol{
	width: 150px;
	height: 115px;
	border-radius: 200px;
	top: 330px;
	left: 380px;
	position: absolute;
	background: #FBFCF0;
}

#sstem {
	width: 20px;
	height: 55px;
	top:220px;
	left:440px;
	position:relative;
	background: #7E4D1F;
}
 #sstem:after {
 	content:"";
 	position:absolute;
 	left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-top: 15px solid #7E4D1F;
    border-right: 10px solid #FBFCF0;
    border-left: 10px solid #FBFCF0;
 }
 #sstem:before {
 	content: "";
    position: absolute;
    top:0px;
    left:0px;
    bottom: 0;
    width: 0;
    height: 10;
    border-top: 10px solid #27AE60;
    border-right: 20px solid transparent;
    border-left: 10px solid transparent;
 }

.element:hover #smol {
	-webkit-animation: swing 1s ease;
        animation: swing 1s ease;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
}

.element:hover #sstem {
	-webkit-animation: swing 1s ease;
        animation: swing 1s ease;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
}

@-webkit-keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
       transform: translateX(-5px);
    } 
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.squash{
	display: block;
	position:absolute;
	left:565px;
	top:180px;
    width: 200px;
    height: 150px;
    background-color: #FFD46F ;
    border-radius: 50% 50% 50% 50% / 50% 60% 40% 40%;

}

#squashhead{
	display: block;
	position:absolute;
	left:160px;
	top:60px;
    width: 90px;
    height: 60px;
    background-color: #FFD46F ;
    border-radius: 80% 60% 90% 50% / 50% 80% 70% 40%;
}

#shadow1{
	position:absolute;
	top:40px;
	left:20px;
	width: 180px;
    height: 50px;
    border-radius: 40%;
    box-shadow: -20px -20px 0 0 #F8C471  ;
    }

#shadow2{
	position:absolute;
	top:80px;
	left:-10px;
	width: 170px;
    height: 30px;
    border-radius: 30%;
    box-shadow: 20px 20px 0 0 #F8C471  ;
    }

#shadow3{
	position:absolute;
	top:85px;
	left:15px;
	width: 190px;
    height: 30px;
    border-radius: 30%;
    box-shadow: -20px -20px 0 0 #F8C471  ;
    }

#vase{
	position:absolute;
	bottom:150px;
	right:420px;
	width: 110px;
    height: 290px;
    background: #27AE60;	
}

#vasewater{
	position:absolute;
	bottom:150px;
	right:420px;
	width: 110px;
    height: 150px;
    background: #52BE80 ;	
}

#stem1{
	width:12px;
	height:300px;
	background:#1E8449  ;
	position:absolute;
	left:400px;
	transform: skew(5deg);
}

#stem2{
	width:12px;
	height:340px;
	background:#1E8449  ;
	position:absolute;
	left:400px;
	transform: skew(-5deg);
}

#stem3{
	width:12px;
	height:320px;
	background:#1E8449  ;
	position:absolute;
	left:430px;
}

#stem4{
	width:12px;
	height:310px;
	background:#1E8449  ;
	position:absolute;
	left:445px;
	transform: skew(-5deg);
}

#stem5{
	width:12px;
	height:320px;
	background:#1E8449  ;
	position:absolute;
	left:440px;
	transform: skew(5deg);
}

.translate{
    transition:all 1.5s ease-in-out;
        position: relative;

}

.translate:hover{
  transform: translateY(300px);
}

.petal1{
	background: yellow ;
	left:350px;
	top:-90px;
	position: absolute;

    height: 50px;
    width: 15px;
}

.petal1:after {
    background: yellow ;
    content: "";
    height: 15px;
    left: -18px;
    position: absolute;
    top: 18px;
    width: 50px;
    }

.petal2{
	background: yellow ;
	top:-75px;
	left:380px;
    height: 50px;
    position: absolute;
    width: 15px;
}

.petal2:after {
    background: yellow ;
    content: "";
    height: 15px;
    left: -18px;
    position: absolute;
    top: 18px;
    width: 50px;
    }

.petal3{
	background: yellow ;
	top:-90px;
	left:430px;
    height: 50px;
    position: absolute;
    width: 15px;
}

.petal3:after {
    background: yellow ;
    content: "";
    height: 15px;
    left: -18px;
    position: absolute;
    top: 18px;
    width: 50px;
    }

.petal4{
	background: yellow ;
	top:-90px;
	left:490px;
    height: 50px;
    position: absolute;
    width: 15px;
}

.petal4:after {
    background: yellow ;
    content: "";
    height: 15px;
    left: -18px;
    position: absolute;
    top: 18px;
    width: 50px;
    }

.petal5{
	background: yellow ;
	left:500px;
	top:-60px;
    height: 50px;
    position: absolute;
    width: 15px;
}

.petal5:after {
    background: yellow ;
    content: "";
    height: 15px;
    left: -18px;
    position: absolute;
    top: 18px;
    width: 50px;
    }

.petal6{
	background: yellow ;
	left:400px;
	top:-108px;
    position: absolute;
    width: 15px;
}

.petal6:after {
    background: yellow ;
    content: "";
    height: 15px;
    left: -18px;
    position: absolute;
    top: 18px;
    width: 50px;
    }

.petal7{
	background: yellow ;
	left:420px;
	top:-60px;
    height: 50px;
    position: absolute;
    width: 15px;
}

.petal7:after {
    background: yellow ;
    content: "";
    height: 15px;
    left: -18px;
    position: absolute;
    top: 18px;
    width: 50px;
    }

 .petal8{
	background: yellow ;
	left:450px;
	top:-85px;
    height: 50px;
    position: absolute;
    width: 15px;
}

.petal8:after {
    background: yellow ;
    content: "";
    height: 15px;
    left: -18px;
    position: absolute;
    top: 18px;
    width: 50px;
    }