@media screen and (max-width: 800px) {
	
		body{
			margin: 0px;
			padding: 0px;
			font-family: Calibri, Sans Serif;
			background: linear-gradient(to right, rgb(250,250,250), rgb(240,240,240), rgb(230,230,230));
		}
		
		.navigation{
			background: linear-gradient(to left, rgb(250,250,250), rgb(240,240,240), rgb(230,230,230));
			width: 100%;
			position: sticky;
			height: auto;
			z-index: 100;
			top: 0px;
			margin: 0px;
			padding: 0px;
		}
		
		.liste_ul{
			display: flex;
			width: 100%;
			align-items: left;
			justify-content: left;
			margin: 0px 0px 0px 40px;
			padding: 0px;
		}
		
		a{
			text-decoration: none;
			color: rgb(100,100,100);
		}		

		a:visited{
			color: rgb(150,150,150);
		}
		
		li{
			list-style-type: none;
		}
		
		.liste_li{						
			flex-direction: column;
			margin-left: 20px;				
			padding: 10px;
		}
		
		#premier_li{
			margin-left: 0%;
		}		
		
		.fa-solid{
			font-size: 16px;		
		}
	
		.bloc-presentation{
			display: flex;
			justify-content: right;
			align-items: right;
			box-shadow: 5px 5px 10px lightgrey;
			background: linear-gradient(to right, rgb(220,255,255), rgb(255,255,255), rgb(240,255,220));
		}
		
		.zone-presentation{
			margin: 10% 10% 10%;
		}
		
		.presentation{			
			font-weight: bolder;
			font-size: 14px;
		}
		
		.photo{
			margin-right: 10%;			
		}
		
		.photo-de-eddy{
			width: 140px;
			height: 245px;		
			animation: photo-full 10s linear 0s infinite alternate;
			filter: contrast(120%) brightness(120%);
			clip-path: circle(30%);
		}
		
		@keyframes photo-full {
			from {scale: 0.7 0.4}
			to {scale: 1.05 0.6}
		}
		
		@keyframes nom-photo {
			from {bottom: 100px; font-size: 16px;}
			to {bottom: 80px; font-size: 20px;}
		}

		h1{
			text-align: center;
			margin: 0px;
			padding: 0px;
			font-size: 20px;
			position: relative;
			bottom: 120px;
			animation: nom-photo 10s linear 0s infinite alternate;
		}
}		

@media screen and (min-width: 801px) {

		body{
			margin: 0px;
			padding: 0px;
			font-family: Calibri, Sans Serif;
			background: linear-gradient(to right, rgb(250,250,250), rgb(240,240,240), rgb(230,230,230));
		}
		
		.navigation{
			background: linear-gradient(to left, rgb(250,250,250), rgb(240,240,240), rgb(230,230,230));
			width: 100%;
			position: sticky;
			height: auto;
			z-index: 100;
			top: 0px;
			margin: 0px;
			padding: 0px;
		}
		
		.liste_ul{
			display: flex;
			width: 100%;
			align-items: right;
			justify-content: right;
			margin: 0px 0px 0px -80px;
			padding: 0px;
		}
		
		a{
			text-decoration: none;
			color: rgb(100,100,100);
		}		

		a:visited{
			color: rgb(150,150,150);
		}
		
		li{
			list-style-type: none;
		}
		
		.liste_li{						
			flex-direction: column;
			margin-left: 40px;				
			padding: 10px;
		}
		
		#premier_li{
			margin-left: 0%;
		}		
		
		.fa-solid{
			font-size: 24px;		
		}
		
		.bloc-presentation{
			display: flex;
			justify-content: right;
			align-items: right;
			box-shadow: 5px 5px 10px lightgrey;
			background: linear-gradient(to right, rgb(220,255,255), rgb(255,255,255), rgb(240,255,220));
		}
		
		.zone-presentation{
			margin: 10% 10% 10%;
		}
		
		.presentation{			
			font-weight: bolder;
			font-size: 20px;
		}
		
		.photo{
			margin-right: 10%;			
		}
		
		.photo-de-eddy{
			width: 200px;
			height: 350px;		
			animation: photo-full 10s linear 0s infinite alternate;
			filter: contrast(120%) brightness(120%);
			clip-path: circle(30%);
		}
		
		@keyframes photo-full {
			from {scale: 1 0.5714285714285}
			to {scale: 1.5 0.8571428571428}
		}
		
		@keyframes nom-photo {
			from {bottom: 120px; font-size: 24px;}
			to {bottom: 100px; font-size: 32px;}
		}

		h1{
			text-align: center;
			margin: 0px;
			padding: 0px;
			position: relative;
			bottom: 120px;
			animation: nom-photo 10s linear 0s infinite alternate;
		}
}