body {
	height: 100%;
	background-image: url(kujetausta.png);
}

/* Container that manages the duck's flight path */
.duck-container {
	position: fixed;
	top: 20%; /* Adjust vertical position */
	left: -150px; /* Start off-screen */
	z-index: 9999; /* Ensure it flies on top of other elements */
	animation: flyAcross 4s linear infinite;
}

.position-2 {
	top: 50%;
	animation: flyAcross2 7s linear infinite;

}

.position-3 {
	top: 75%;
	animation: flyAcross3 6s linear infinite;
}

/* The duck image itself */
.duck {
	width: 100px;
	height: auto;
	transform: scaleX(1); /* Flips the duck to face the correct way */
}

/* Define the flight path */
@keyframes flyAcross {
	0% {
	  left: -150px; /* Off-screen on the left */
	}
	49% {
	  transform: scaleX(1); /* Facing right */
	}
	50% {
	  left: 100vw; /* Off-screen on the right */
	  transform: scaleX(-1); /* Turn around */
	}
	51% {
	  left: 100vw; /* Keep facing left for the return trip */
	}
	99% {
	  transform: scaleX(-1);
	}
	100% {
	  left: -150px; /* Back to start */
	  transform: scaleX(1); /* Face right again */
	}
}

@keyframes flyAcross2 {
	0% {
	  left: -200px; /* Off-screen on the left */
	}
	49% {
	  transform: scaleX(1); /* Facing right */
	}
	50% {
	  left: 105vw; /* Off-screen on the right */
	  transform: scaleX(-1); /* Turn around */
	}
	51% {
	  left: 100vw; /* Keep facing left for the return trip */
	}
	99% {
	  transform: scaleX(-1);
	}
	100% {
	  left: -150px; /* Back to start */
	  transform: scaleX(1); /* Face right again */
	}
}

@keyframes flyAcross3 {
	0% {
	  left: -450px; /* Off-screen on the left */
	}
	49% {
	  transform: scaleX(1); /* Facing right */
	}
	50% {
	  left: 100vw; /* Off-screen on the right */
	  transform: scaleX(-1); /* Turn around */
	}
	51% {
	  left: 100vw; /* Keep facing left for the return trip */
	}
	99% {
	  transform: scaleX(-1);
	}
	100% {
	  left: -150px; /* Back to start */
	  transform: scaleX(1); /* Face right again */
	}
}