:root {
		--h: 50vh;
		--w: 100vw;
		--color: white;
	}

	body {
		padding:0; margin:0;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		background: orange;
		height: 100vh;
		font-size: 24px;
		background-image: url('2.jpg');
		background-size: cover;
		font-weight:bold;
		font-family: Verdana, Arial, Helvetica;
		
	}
	main {
		background: transparent;
		padding: 2rem;
		font-size: 1.5rem;
 		position: relative; 
  		overflow: hidden; 
  		width: var(--w); /* Set the width of the container */
  		height: var(--h);
  		color:white; 		
	}

	p {
		width: 35rem; 
		height: 2rem;
		position:absolute;
		white-space: nowrap;
	}
	p {
		animation:
    	10s linear 0s 20 fally
	}
	@keyframes fally {
	  from {
	    transform: translate(0vw, 0vh) rotate(0deg); /* translateY(0vh), translateX(0vw)*/;
	    opacity:1;

	  }
	  to {
	    transform: translate(50vw, 110vh) rotate(-13deg); /*translateY(110vh), translateX(50vw);*/
	    opacity:0;
	  }
	}

	@keyframes fally2 {
	  from {
	    transform: translate(0vw, 0vh) rotate(0deg); /* translateY(0vh), translateX(0vw)*/;
	    opacity:1;

	  }
	  to {
	    transform: translate(100vw, 120vh) rotate(-25deg); /*translateY(110vh), translateX(50vw);*/
	    opacity:0;
	  }
	}
	@keyframes fally3 {
	  from {
	    transform: translate(40vw, 0vh) rotate(0deg); /* translateY(0vh), translateX(0vw)*/;
	    opacity:1;

	  }
	  to {
	    transform: translate(100vw, 80vh) rotate(-5deg); /*translateY(110vh), translateX(50vw);*/
	    opacity:0;
	  }
	}	
	

footer {
	position:absolute;
	width:100%;
	padding-right:24px;
	bottom:0;
	text-align: right;
}

@media(max-width: 680px) {
	body {
		background-position-x: -100px;
	}

	@keyframes fally {
	  to {
	    transform: translate(10vw, 110vh) rotate(-13deg);
	    opacity:0;
	  }
	}	
	main {
		font-size:1.2rem;
	}
}