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

/* do NOT modify the canvas */

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

/* modify the assets below */

#mirror {
	width: 250px;
	height: 140px;
	border-left: 10px solid transparent;
	border-right: 100px solid transparent;
	border-bottom: 10px solid transparent;
	transform: skew(20deg);
	background: #8f8f8f;
	top: 400px;
	left: 250px;
	position: absolute;
	box-shadow: -1px 6px 5px -3px rgba(46,44,42,1);
}



#vase {
	width: 100px;
	height: 20px;
	border-left: 0px solid transparent;
	border-right: 0px solid transparent;
	border-bottom: 300px solid transparent;
	background: linear-gradient(to right, rgba(18,125,12,0.98) 0%, rgba(18,125,12,1) 0%, rgba(53,168,36,1) 41%, rgba(53,168,36,1) 51%, rgba(28,114,23,1) 99%, rgba(28,114,23,1) 100%);
	position: absolute;
	top: 150px;
	left: 400px;
	border-radius: 25px 25px 25px 25px;
	box-shadow: 0px 74px 11px -6px rgba(66,66,66,1);
}

#stem1 {
	width: 10px;
	height: 300px;
	background: green;
	top: 50px;
	left: 410px;
	position: absolute;
}
#stem2 {
	width: 10px;
	height: 300px;
	background: green;
	top: 55px;
	left: 425px;
	position: absolute;
}
#stem3 {
	width: 10px;
	height: 300px;
	background: green;
	top: 50px;
	left: 445px;
	position: absolute;
}
#stem4 {
	width: 10px;
	height: 300px;
	background: green;
	top: 66px;
	left: 465px;
	position: absolute;
}
#stem5 {
	width: 10px;
	height: 300px;
	background: green;
	top: 55px;
	left: 480px;
	position: absolute;
}

#flower1 {
	width: 45px;
	height: 30px;
	background: #fff200;
	top: 30px;
	left: 395px;
	position: absolute;
	border-radius: 171px 171px 171px 171px;
	/*border: 2px solid #d4d400;*/
}
#flower2{
	width: 40px;
	height: 25px;
	background: yellow;
	top: 55px;
	left: 410px;
	position: absolute;
	border-radius: 171px 171px 171px 171px;
}
#flower3 {
	width: 30px;
	height: 25px;
	background: #fff200;
	top: 40px;
	left: 440px;
	position: absolute;
	border-radius: 171px 171px 171px 171px;
}
#flower4 {
	width: 25px;
	height: 15px;
	background: yellow;
	top: 65px;
	left: 455px;
	position: absolute;
	border-radius: 171px 171px 171px 171px;
}
#flower5 {
	width: 45px;
	height: 25px;
	background: #fff200;
	top: 55px;
	left: 465px;
	position: absolute;
	border-radius: 171px 171px 171px 171px;
}

#orangepumpkin {
	width: 180px;
	height: 150px;
	background: linear-gradient(to bottom, rgba(224,123,0,1) 0%, rgba(224,123,0,1) 2%, rgba(148,81,0,1) 43%, rgba(148,81,0,1) 48%, rgba(204,109,0,1) 100%);
   border-radius: 150px;
	top: 350px;
	left: 250px;
	position: absolute;
	box-shadow: 0px 46px 26px -9px rgba(66,66,66,1);

}
#pumpkinstem1 {
	width: 20px;
	height: 110px;

	background: linear-gradient(to right, rgba(51,27,0,1) 0%, rgba(51,27,0,1) 2%, rgba(71,38,0,1) 43%, rgba(74,39,0,1) 48%, rgba(41,22,0,1) 100%);
	top: 260px;
	left: 330px;
	position: absolute;
}
#pumpkinstem2 {
	width: 10px;
	height: 50px;
	background: #806844;
	top: 410px;
	left: 525px;
	position: absolute;
}

#yellowpumpkin {
	width: 105px;
	height: 100px;
background: linear-gradient(to bottom, rgba(241,231,103,1) 0%, rgba(241,231,103,1) 1%, rgba(254,182,69,1) 18%, rgba(241,231,103,1) 38%, rgba(254,182,69,1) 62%, rgba(241,231,103,1) 85%, rgba(254,182,69,1) 100%);	top: 400px;
	left: 520px;
		border-radius: 250px;
	position: absolute;
	box-shadow: 0px 13px 14px -1px rgba(66,66,66,1);
}
#whitepumpkin {
	width: 100px;
	height: 80px;
	background: linear-gradient(to bottom, rgba(247,243,202,1) 0%, rgba(204,199,166,1) 47%, rgba(247,243,202,1) 100%);
	border-radius: 200px;
	top: 450px;
	left: 480px;
	position: absolute;
	box-shadow: 0px 13px 14px -1px rgba(66,66,66,1);
}
#pumpkinstem2 {
	width: 10px;
	height: 50px;
	background: #806844;
	top: 410px;
	left: 525px;
	position: absolute;
}


/*.canvas:hover{
	 background:#53a7ea;
}*/

.grow:hover
{
        -webkit-transform: scale(1.3);
        -ms-transform: scale(1.3);
        transform: scale(1.3);
}



@keyframes bgcolor {
    0% {
        background-color: #ffcbc7
    }

    30% {
        background-color: #ff7569
    }

    60% {
        background-color: #ffcbc7
    }

    90% {
        background-color: #ff7569
    }

    100% {
        background-color: #ffcbc7
    }
}

body {
    -webkit-animation: bgcolor 10s infinite;
    animation: bgcolor 10s infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}