body{
	background: #F6F4F7;
}

.dino{
	width: 50px;
	height: 50px;
	position: relative;
	left: 5%;
	top: 300%;
	transform: translate(-5%, 300%);
	transition: 0.2s;
	/*box-shadow: 5px 5px 30px;  */
}

.sunMoon{
	width: 35px;
	height: 35px;
	/*background: url(https://cdn4.iconfinder.com/data/icons/nature-life-in-color/128/sun-64.png);
	background-size: cover;*/
	position: relative;
	left: 70%;
	top: -150%;
	transform: translate(-70%, 150%);

}

.row{
	overflow: hidden;
}

.box{
	position: absolute;
	top: 35%;
	left: 0%;
	/*transform: translate(50%, 200%);*/
	height: 25px;
	width: 25px;
	background: url(https://cdn3.iconfinder.com/data/icons/quartz/Box.png);
	background-size: cover;
	animation-name: fall;
	animation-duration: 5s;
	animation-iteration-count: infinite;	
}

.container{
	width: 75%;
	height: 10px;
	background: linear-gradient(90deg, #B6B4B7, #363437);
	left: 15%;
	top: 1400%;
	transform: translate(15%, 1400%);
	animation-name: grand;
	animation-duration: 0.5s;
	animation-iteration-count: infinite;	
	overflow: hidden;	
	z-index: 9999999999;
}

.grass{
	width: 2px;
	height: 15px;
	background: black;
	display: inline-block;
	position: relative;
	margin-left: 10px;
	left: 10%;
	top: -20%;
	transform: translate(-20%, -30%);
	animation-name: grass;
	animation-duration: 0.2s;
	animation-iteration-count: infinite;		
}

.grass:nth-child(8){
	width: 10px;
}

.grassTwoo:nth-child(1){
	width: 10px;
}

.grassTwoo{
	width: 2px;
	height: 15px;
	background: black;
	display: inline-block;
	position: relative;
	margin-left: 10px;
	left: 10%;
	top: -20%;
	transform: translate(30%, -20%);
	animation-name: grassTwoo;
	animation-duration: 0.3s;
	animation-iteration-count: infinite;	
}

/*-----------------------Buttons styles start------------------------------*/

.dark{
	background: #49505F;
	color: #fff;
	border: 2px solid #323741;
	position: relative;
	left: 0%;
	top: 300%;
	transform: translate(-0%, -400%);	
}

.lite{
	background: #F6F4BB;
	color: #000;
	border: 2px solid #CAC84E;	
	position: relative;
	left: 0%;
	top: 300%;
	transform: translate(-0%, -400%);	
}

/*-----------------------Buttons styles end------------------------------*/




/*---------------------------Animations start---------------------------------------*/

@keyframes grassTwoo{
	from{
		left: 0%;
	}
	to{
		left: 100%;
	}
}

@keyframes grass{
	from{
		left: 100%;
	}
	to{
		left: 0%;
	}
}

@keyframes grand{
	0%{
		background: linear-gradient(90deg, #9B999C, #454346);
	}

	10%{
		background: linear-gradient(90deg, #878588, #747275;)
	}	
}

@keyframes fall{
	0%{
		
		margin-left: 88%;
	}

}