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

/* do NOT modify the canvas */

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

/* modify the assets below */
#diamond-shield {
	width: 0;
	height: 0;
	border: 400px solid transparent;
	border-bottom: 100px solid gray;
	position: absolute;
	top: -100px;
	left: 50px;
	}

#diamond-shield:after {
	content: '';
	position: absolute;
	left: -400px;
	top: 100px;
	width: 0;
	height: 0;
	border: 400px solid transparent;
	border-top: 150px solid gray;
			}

/*#triangle {
	width: 0;
	height: 0;
	border-left: 100px solid transparent;
	border-right: 100px solid transparent;
	border-bottom: 200px solid yellow;
	position: absolute;
	top: 260px;
	left: 100px;
}*/

#square {
	width: 90px;
	height: 230px;
	background: rgba(98,161,82,1);
background: -moz-linear-gradient(left, rgba(98,161,82,1) 0%, rgba(175,250,77,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(98,161,82,1)), color-stop(100%, rgba(175,250,77,1)));
background: -webkit-linear-gradient(left, rgba(98,161,82,1) 0%, rgba(175,250,77,1) 100%);
background: -o-linear-gradient(left, rgba(98,161,82,1) 0%, rgba(175,250,77,1) 100%);
background: -ms-linear-gradient(left, rgba(98,161,82,1) 0%, rgba(175,250,77,1) 100%);
background: linear-gradient(to right, rgba(98,161,82,1) 0%, rgba(175,250,77,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#62a152', endColorstr='#affa4d', GradientType=1 );
	top: 180px;
	left: 500px;
	position: absolute;
}




#base1 {
	width: 250px;
	height: 180px;
	background: rgba(252,234,187,1);
background: -moz-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(250,192,77,1) 10%, rgba(247,165,0,1) 22%, rgba(250,187,77,1) 37%, rgba(250,167,77,1) 45%, rgba(245,147,0,1) 61%, rgba(247,148,0,1) 80%, rgba(250,192,77,1) 89%, rgba(250,192,77,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(252,234,187,1)), color-stop(10%, rgba(250,192,77,1)), color-stop(22%, rgba(247,165,0,1)), color-stop(37%, rgba(250,187,77,1)), color-stop(45%, rgba(250,167,77,1)), color-stop(61%, rgba(245,147,0,1)), color-stop(80%, rgba(247,148,0,1)), color-stop(89%, rgba(250,192,77,1)), color-stop(100%, rgba(250,192,77,1)));
background: -webkit-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(250,192,77,1) 10%, rgba(247,165,0,1) 22%, rgba(250,187,77,1) 37%, rgba(250,167,77,1) 45%, rgba(245,147,0,1) 61%, rgba(247,148,0,1) 80%, rgba(250,192,77,1) 89%, rgba(250,192,77,1) 100%);
background: -o-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(250,192,77,1) 10%, rgba(247,165,0,1) 22%, rgba(250,187,77,1) 37%, rgba(250,167,77,1) 45%, rgba(245,147,0,1) 61%, rgba(247,148,0,1) 80%, rgba(250,192,77,1) 89%, rgba(250,192,77,1) 100%);
background: -ms-linear-gradient(left, rgba(252,234,187,1) 0%, rgba(250,192,77,1) 10%, rgba(247,165,0,1) 22%, rgba(250,187,77,1) 37%, rgba(250,167,77,1) 45%, rgba(245,147,0,1) 61%, rgba(247,148,0,1) 80%, rgba(250,192,77,1) 89%, rgba(250,192,77,1) 100%);
background: linear-gradient(to right, rgba(252,234,187,1) 0%, rgba(250,192,77,1) 10%, rgba(247,165,0,1) 22%, rgba(250,187,77,1) 37%, rgba(250,167,77,1) 45%, rgba(245,147,0,1) 61%, rgba(247,148,0,1) 80%, rgba(250,192,77,1) 89%, rgba(250,192,77,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fac04d', GradientType=1 );
	border-radius: 200px;
	top: 250px;
	left: 150px;
	position: absolute;
}


#stem1 {
	width: 20px;
	height: 100px;
	background: black;
	top: 170px;
	left: 270px;
	position: absolute;
}

#base2 {
	width: 130px;
	height: 80px;
	background: white;
	border-radius: 200px;
	top: 390px;
	left: 340px;
	position: absolute;
}

#stem2 {
	width: 10px;
	height: 30px;
	background: black;
	top: 370px;
	left: 400px;
	position: absolute;
}

#egg {
      position: absolute;
			top: 370px;
			left: 550px;
      width: 150px;
      height: 120px;
			background: rgba(252,234,187,1);
background: -moz-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 16%, rgba(251,223,147,1) 20%, rgba(248,181,0,1) 22%, rgba(252,205,77,1) 37%, rgba(252,205,77,1) 45%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 67%, rgba(248,181,0,1) 80%, rgba(252,205,77,1) 89%, rgba(252,205,77,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(252,234,187,1)), color-stop(16%, rgba(252,205,77,1)), color-stop(20%, rgba(251,223,147,1)), color-stop(22%, rgba(248,181,0,1)), color-stop(37%, rgba(252,205,77,1)), color-stop(45%, rgba(252,205,77,1)), color-stop(51%, rgba(248,181,0,1)), color-stop(67%, rgba(251,223,147,1)), color-stop(80%, rgba(248,181,0,1)), color-stop(89%, rgba(252,205,77,1)), color-stop(100%, rgba(252,205,77,1)));
background: -webkit-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 16%, rgba(251,223,147,1) 20%, rgba(248,181,0,1) 22%, rgba(252,205,77,1) 37%, rgba(252,205,77,1) 45%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 67%, rgba(248,181,0,1) 80%, rgba(252,205,77,1) 89%, rgba(252,205,77,1) 100%);
background: -o-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 16%, rgba(251,223,147,1) 20%, rgba(248,181,0,1) 22%, rgba(252,205,77,1) 37%, rgba(252,205,77,1) 45%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 67%, rgba(248,181,0,1) 80%, rgba(252,205,77,1) 89%, rgba(252,205,77,1) 100%);
background: -ms-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 16%, rgba(251,223,147,1) 20%, rgba(248,181,0,1) 22%, rgba(252,205,77,1) 37%, rgba(252,205,77,1) 45%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 67%, rgba(248,181,0,1) 80%, rgba(252,205,77,1) 89%, rgba(252,205,77,1) 100%);
background: linear-gradient(to bottom, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 16%, rgba(251,223,147,1) 20%, rgba(248,181,0,1) 22%, rgba(252,205,77,1) 37%, rgba(252,205,77,1) 45%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 67%, rgba(248,181,0,1) 80%, rgba(252,205,77,1) 89%, rgba(252,205,77,1) 100%);
      border-radius: 50% 50% 50% 50% / 60% 60% 50% 40%;
    }

		#circle {
			position: absolute;
			top: 400px;
			left: 620px;
      width: 150px;
      height: 70px;
			background: rgba(252,234,187,1);
background: -moz-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 16%, rgba(251,223,147,1) 20%, rgba(248,181,0,1) 22%, rgba(252,205,77,1) 37%, rgba(252,205,77,1) 45%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 67%, rgba(248,181,0,1) 80%, rgba(252,205,77,1) 89%, rgba(252,205,77,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(252,234,187,1)), color-stop(16%, rgba(252,205,77,1)), color-stop(20%, rgba(251,223,147,1)), color-stop(22%, rgba(248,181,0,1)), color-stop(37%, rgba(252,205,77,1)), color-stop(45%, rgba(252,205,77,1)), color-stop(51%, rgba(248,181,0,1)), color-stop(67%, rgba(251,223,147,1)), color-stop(80%, rgba(248,181,0,1)), color-stop(89%, rgba(252,205,77,1)), color-stop(100%, rgba(252,205,77,1)));
background: -webkit-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 16%, rgba(251,223,147,1) 20%, rgba(248,181,0,1) 22%, rgba(252,205,77,1) 37%, rgba(252,205,77,1) 45%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 67%, rgba(248,181,0,1) 80%, rgba(252,205,77,1) 89%, rgba(252,205,77,1) 100%);
background: -o-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 16%, rgba(251,223,147,1) 20%, rgba(248,181,0,1) 22%, rgba(252,205,77,1) 37%, rgba(252,205,77,1) 45%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 67%, rgba(248,181,0,1) 80%, rgba(252,205,77,1) 89%, rgba(252,205,77,1) 100%);
background: -ms-linear-gradient(top, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 16%, rgba(251,223,147,1) 20%, rgba(248,181,0,1) 22%, rgba(252,205,77,1) 37%, rgba(252,205,77,1) 45%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 67%, rgba(248,181,0,1) 80%, rgba(252,205,77,1) 89%, rgba(252,205,77,1) 100%);
background: linear-gradient(to bottom, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 16%, rgba(251,223,147,1) 20%, rgba(248,181,0,1) 22%, rgba(252,205,77,1) 37%, rgba(252,205,77,1) 45%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 67%, rgba(248,181,0,1) 80%, rgba(252,205,77,1) 89%, rgba(252,205,77,1) 100%);
      border-radius: 70% 50% 50% 50% / 60% 60% 50% 40%;
		}

#rec1 {
	width: 10px;
	height: 90px;
	background: green;
	top: 90px;
	left: 515px;
	position: absolute;
}

#rec2 {
	width: 10px;
	height: 90px;
	background: green;
	top: 90px;
	left: 530px;
	position: absolute;
}

#rec3 {
	width: 10px;
	height: 90px;
	background: green;
	top: 90px;
	left: 545px;
	position: absolute;
}

#rec4 {
	width: 10px;
	height: 90px;
	background: green;
	top: 90px;
	left: 560px;
	position: absolute;
}

@keyframes one {
  from {background-color: red;}
  to {background-color: yellow;}
}

@keyframes two {
  from {background-color: yellow;}
  to {background-color: red;}
}

#bud1 {
	animation-name: one;
  animation-duration: 4s;
	animation-iteration-count: 500;
	background: yellow;
	width: 30px;
	height: 30px;
	top: 70px;
	left: 500px;
	position: absolute;
	text-align: center;
	transform: rotate(20deg);
}
#bud1:before {
	content: "";
	position: absolute;
	animation-name: one;
  animation-duration: 4s;
	animation-iteration-count: 500;
	top: 0;
	left: 0;
	height: 30px;
	width: 30px;
	background: yellow;
	transform: rotate(135deg);

}

#bud2 {
	background: yellow;
	animation-name: two;
  animation-duration: 4s;
	animation-iteration-count: 500;
	width: 30px;
	height: 30px;
	top: 65px;
	left: 515px;
	position: absolute;
	text-align: center;
	transform: rotate(20deg);
}
#bud2:before {
	content: "";
	position: absolute;
	animation-name: two;
  animation-duration: 4s;
	animation-iteration-count: 500;
	top: 0;
	left: 0;
	height: 30px;
	width: 30px;
	background: yellow;
	transform: rotate(135deg);
}

#bud3 {
	background: yellow;
	animation-name: one;
  animation-duration: 4s;
	animation-iteration-count: 500;
	width: 30px;
	height: 30px;
	top: 70px;
	left: 535px;
	position: absolute;
	text-align: center;
	transform: rotate(20deg);
}
#bud3:before {
	content: "";
	position: absolute;
	animation-name: one;
  animation-duration: 4s;
	animation-iteration-count: 500;
	top: 0;
	left: 0;
	height: 30px;
	width: 30px;
	background: yellow;
	transform: rotate(135deg);
}

#bud4 {
	background: yellow;
	animation-name: two;
  animation-duration: 4s;
	animation-iteration-count: 500;
	width: 30px;
	height: 30px;
	top: 65px;
	left: 550px;
	position: absolute;
	text-align: center;
	transform: rotate(20deg);
}
#bud4:before {
	content: "";
	position: absolute;
	animation-name: two;
  animation-duration: 4s;
	animation-iteration-count: 500;
	top: 0;
	left: 0;
	height: 30px;
	width: 30px;
	background: yellow;
	transform: rotate(135deg);