body{
	background-image: url('../img/background.gif');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	position: fixed;
}
.curtains{
	position: fixed;
	height: 95%;
	width: 100%;
	z-index: 2;
	/*background-image: url('../img/Jinn.png');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: 50% 75%;
	background-position: center;*/
}
.stage{
	position: fixed;
	height: 25%;
	width: 100%;
	bottom: 0;
	z-index: 1;
	background-image: url('../img/Stage.png');
	background-size: cover;
	background-position: center;
}
.coins{
	display: block;
	position: fixed;
	height: 25%;
	z-index: -1 !important;
	bottom: 22%;
	left: 5%;
}

@keyframes slidein {
  	30% { top: 5%; }
  	100% { top: 11%; left: 25%; }
}

@keyframes zoom {
  	0% { top: 15%; }
  	68%, 72% { top: 20%; }
  	90% { top: 25%; }
  	100%{ top: 15%; }
}
.jinn{
	display: block;
	position: fixed;
	top: 11%;
	left: 25%;
	height: 75%;
	z-index: 3 !important;
  	animation: 5s infinite slidein;
}
.camel{
	display: block;
	position: fixed;
	height: 60%;
	bottom: 17%;
	z-index: -1 !important;
}
.smoke{
	display: block;
	position: fixed;
	bottom: 0%;
	left: 0%;
	right: 0%;
	height: 75%;
	width: 100%;
	z-index: -1 !important;
  	animation: 5s infinite zoom;
}

.formulaire{
	position: fixed;
	height: 100%;
	width: 100%;
	margin: auto !important;
}
#form{
	position: relative;
	top: 85%;
	color: #fff;
	font-size: 1.5rem;
	width: 70%;
	margin: auto;
	z-index: 4;
}

.form-control{
	font-size: 1.5rem;
	color: var(--bs-warning) !important;
}

@media screen and (max-width: 768px) {
	.curtains{
		height: 55%;
	}
	.stage{
		height: 50%;
		bottom: 0;
	}
	#form{
		top: 69%;
		font-size: 1.1rem;
		width: 100%;
	}
	.form-control{
		font-size: 1.1rem;
	}

	@keyframes slidein {
	  	30% { top: 14%; }
	  	100% { top: 5%; left: 25%; }
	}
	.coins{
		height: 15% !important;
		bottom: 40%;
		left: 0%;
	}
	.jinn{
		top: 5%;
		left: 20% !important;
		height: 50%;
	}
	.camel{
		height: 40%;
		bottom: 40%;
		left: 65%;
	}
}

/*@media screen and (max-width: 516px) {
	@keyframes slidein {
	  	30% { top: 30%; }
	  	100% { top: 35%; left: 25%; }
	}
	.coins{
		height: 15% !important;
		bottom: 22%;
		left: 0%;
	}
	.jinn{
		top: 35%;
		left: 0% !important;
		height: 50%;
	}
}

@media (min-width: 640px) and (max-width: 767px) {
	@keyframes slidein {
	  	30% { top: 15%; }
	  	100% { top: 20%; left: 20%; }
	}
	.jinn{
		top: 10%;
		left: 25% !important;
		height: auto;
	}
	.camel{
		height: 60%;
		bottom: 17%;
		z-index: -1 !important;
		right: 2% !important;
	}
	.coins{
		height: 25% !important;
		bottom: 22%;
		left: 5%;
	}
}*/

:root {
  --animate-duration: 1600ms;
  --animate-delay: 0.9s;
}