/* Ce code permet de neutraliser les marges par défaut */
*,
*::before,
*::after {
	box-sizing: border-box;
}
* {
	margin: 0;
}

/* Ce code permet de centrer les éléments dans la corps de la page */
body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
	height: 100vh;
	flex-wrap: wrap;
	
}

/* Ce code définit une largeur d'image de 500px */
img {
	width: 500px;
}

/* Ce code définit les paramètres du bloc contenant l'histoire" */
.histoire {
	/* définir une largeur de 500px */
	width: 500px; 
	/* ajout d'une bordure noire de 1px */
	border: 1px solid black; 
	/* ajout d'une marge de 15px */
	padding: 15px; 
}


body.poursuivre {
	/* ajout d'un fond gris sombre pour cette page uniquement */
	background-color: #333333;
}

/* Animation flottante pour l'image sur la page poursuivre */
/* Utilisation d'une animation de flottement qui fait monter et descendre doucement l'image */
@keyframes floating {
	0% {
		transform: translateY(0px);
	}

	50% {
		transform: translateY(-20px);
	}

	100% {
		transform: translateY(0px);
	}
}

/* Appliquer l'animation flottante à l'image uniquement sur la page "poursuivre" */
body.poursuivre img {
	animation: floating 4s ease-in-out infinite;
}