body{
	width: 100%;
	margin: 0px;
	padding: 0px;
	background-color: rgba(116,233,255,100);
	overflow: hidden;
}
a{
	text-decoration: none;
	color: white;
}
p{
	font-family: Helvetica, arial, sans-serif;
	line-height: normal;
	font-weight: bold;
	padding: 0;
	margin: 0;
}
#footer{
	height: 100%;
	width: 100%;
	position: absolute;
	bottom: 0px;
}

#ground{
	background-color: rgba(140,98,63,50);
	height: 150px;
	width: 100%;
	position: absolute;
	bottom: 0px;

}
#grass{
	width: 100%;
	height: 55px;
	background-image: url("grassborder.png");
	position: absolute;
	bottom: 150px;;
	
}
#home{
	background-image: url("home.png");
	width: 100px;
	height: 31px;
	position: absolute;
	bottom: 60px;
}
#home p{
	font-size: 20px;
	color: white;
	position: relative;
	top: 9px;
	left: 20px;
}
@media screen and (-webkit-min-device-pixel-ratio:0){
	.cloud{
		position: absolute;
		left: -280px;
		background-image: url("cloud1.png");
		background-repeat: no-repeat;
		overflow: visible;
		background-size: 100%;
		-webkit-animation: linear infinite;
	}
	@-webkit-keyframes cloud
	{
	0%	 {opacity: 0; left:-10%;}
	10%  {opacity: 1;}
	90%  {opacity: 1;}
	100% {opacity: 0; left:110%;}
	}



}
.cloud{
	position: absolute;
	left: -280px;
	background-image: url("cloud1.png");
	background-repeat: no-repeat;
	overflow: visible;
	background-size: contain;
	-moz-animation: linear infinite;
	
}
@-moz-keyframes cloud
{
	0%	 {opacity: 0; left:-10%;}
	10%  {opacity: 1;}
	90%  {opacity: 1;}
	100% {opacity: 0; left:110%;}
}
#text{
	width: 450px;
	height: 200px;
	margin: 10px auto;
}
#text p i{
	font-weight: normal;
}

#title{
	font-family: Helvetica, arial, sans-serif;
	font-size: 30px;
	font-weight: bold;
	color: white;
}
  /********************************/
 /*    Bunny animation           */
/********************************/
#bunny{
	height: 92px;
	width: 100px;
	background-image: url("bunny.png");
	position: absolute;
	bottom: 150px;
	-moz-animation: bunny 50s linear infinite;

}
@-moz-keyframes bunny{
	0%   {opacity: 0; left: 1%; bottom: 150px;}
	2%   {left: 5%; bottom: 160px;}
	5%   {opacity: 1; left: 7%; bottom: 150px;}
	10%  {left: 12%; bottom: 175px;}
	15%  {left: 20%; bottom: 150px;}
	20%  {left: 20%; bottom: 150px;}
	25%	 {left: 30%; bottom: 175px;}
	30%	 {left: 40%; bottom: 150px;}
	40%  {left: 40%; bottom: 150px;}
	45%  {left: 45%; bottom: 160px;}
	50%  {left: 50%; bottom: 150px;}
	55%  {left: 50%; bottom: 150px;}
	60%  {left: 55%; bottom: 160px;}
	65%  {left: 60%; bottom: 150px;}
	75%  {left: 70%; bottom: 170px;}
	85%  {left: 80%; bottom: 150px;}
	90%  {left: 90%; bottom: 160px;}
	95%  {left: 95%; bottom: 150px; opacity: 1;}
	96%  {opacity: 0;}	
	100% {left: 100%; bottom: 150px; opacity: 0;}
}
@media screen and (-webkit-min-device-pixel-ratio:0){
	#bunny{
	height: 92px;
	width: 100px;
	background-image: url("bunny.png");
	position: absolute;
	bottom: 150px;
	-webkit-animation: bunny 50s linear infinite;

	}
	@-webkit-keyframes bunny{
		0%   {opacity: 0; left: 1%; bottom: 150px;}
		2%   {left: 5%; bottom: 160px;}
		5%   {opacity: 1; left: 7%; bottom: 150px;}
		10%  {left: 12%; bottom: 175px;}
		15%  {left: 20%; bottom: 150px;}
		20%  {left: 20%; bottom: 150px;}
		25%	 {left: 30%; bottom: 175px;}
		30%	 {left: 40%; bottom: 150px;}
		40%  {left: 40%; bottom: 150px;}
		50%  {left: 50%; bottom: 180px;}
		55%  {left: 60%; bottom: 150px;}
		65%  {left: 60%; bottom: 150px;}
		75%  {left: 75%; bottom: 170px;}
		85%  {left: 80%; bottom: 150px;}
		90%  {left: 90%; bottom: 160px;}
		95%  {left: 95%; bottom: 150px; opacity: 1;}
		96%  {opacity: 0;}	
		100% {left: 100%; bottom: 150px; opacity: 0;}
	}
}