.Bouchra
{
	color : #0F9DE8;
}

body 
{
	display:flex;
	white-space: nowrap; 
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
	background-color: #ffffff;

}

.responsive-image 
{           
	height: 50%;
	width: auto;
	position: absolute;
    top: 50%; /* Positionnement vertical à 50% */
    left: 50%; /* Positionnement horizontal à 50% */
    transform: translate(-50%, -50%);
	animation: moveAndResize 1s forwards 1s;

}

@keyframes moveAndResize 
{
    0%
	{ 	
	    top: 25%;
        left: 25%;
        transform: translate(0, 0) scale(1);
	}
    
	
    100%
	{
        top: 5%;
        left: 5%;
        transform: translate(-50%, -50%) scale(0.2);
    }
	
}


.titre
{
    position: absolute;
    animation: glisseD 1s forwards 1s;
    opacity: 0;
    top: 50%; /* Positionnement vertical à 50% */
    left: 50%; /* Positionnement horizontal à 50% */
    transform: translate(-50%, -50%);
	font-size: 2em;
	font-family: "Comfortaa", sans-serif;
	font-weight: 500;
	font-style: normal;
}

@keyframes glisseD 
{
    0% 	
	{
        top: 5%;
		left: -50%;
		opacity : 50%;
	}
	

    100% 	
	{
        top: 5%;
		left: 50%;
		opacity : 100%;
	}
		
}	


.button 
{

	position: absolute;
	top: 10%; /* Positionnement vertical à 50% */
	left: 50%; /* Positionnement horizontal à 50% */
	transform: translate(-50%, 0%);
	opacity : 0%;
	animation: fade 2s forwards 2s;
	
	background-color: #9933FF;
	font-family: "Comfortaa", sans-serif;
	border: none;
	color: white;
	padding: 10px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 18px;
	margin: 4px 2px;
	cursor: pointer;
	border-radius: 12px;
	width: auto;
	font-weight: bold;
}	

@keyframes fade 
{
    0% 	
	{

		opacity : 50%;
	}
	

    100% 	
	{

		opacity : 100%;
	}
		
}