html,
body {
	height: 100%;
}

#butterfly {
	height: 200px;
	width: auto;
	position: absolute;
	z-index: 9999;
}

#wateringcan {
	width: 200px;
	position: fixed;
	bottom: 20%;
	left: 40%;
	user-select: none;
	z-index: 3;
}

.waterdrop {
	width: 20px;
	position: absolute;
	z-index: 3;
}

#net {
	height: 600px;
	width: auto;
	position: absolute;
	z-index: 2;
}

.apple {
	height: 50px;
	width: auto;
	/* position: absolute; */
	z-index: 10;
}

#tree {
	position: fixed;
	bottom: 20px;
	left: 50%;
}

.basket {
	width: 200px;
	position: fixed;
	bottom: 20px;
	left: 20%;
	z-index: 0;
}

#basketfront {
	z-index: 999;
}

body {
	margin: 0px;
	background-image: url("../images/grass.png");
	background-attachment: fixed;
	background-repeat: repeat-x;
	background-position: bottom;
	overflow: hidden;
}

#sun {
	position: fixed;
	top: 20px;
	left: 20px;
	z-index: -1;
	width: 240px;
	height: auto;
}

#moon {
	position: fixed;
	top: 20px;
	left: 20px;
	z-index: -1;
	width: 240px;
	height: auto;
}

.raindrop {
	position: absolute;
	width: 20px;
	height: 20px;
	background-image: url("../images/drop.png");
	background-size: cover;
	z-index: 9999;
	top: 100vh;
}

#garden {
	position: relative;
	width: 100%;
	height: 400px;
	background-color: #b7e3cb;
}

#flowers-container {
	display: flex;
	justify-content: space-around;
	position: absolute;
	bottom: 0;
	width: 100%;
}

.flower {
	width: 80px;
	height: 100px;
	transition: transform 0.5s ease;
	margin: 0 50px;
	z-index: 999;
}

/* clouds */
.cloud {
	position: absolute;
	z-index: 0;
	width: auto;
}

#cloud1 {
	top: 2%;
	left: -520px;
	width: 520px;
}

#cloud2 {
	top: 25%;
	left: -350px;
	width: 350px;
}

#cloud3 {
	top: 40%;
	left: -380px;
	width: 380px;
}

#cloud4 {
	top: 50%;
	left: -500px;
	width: 500px;
}