@media screen and (max-width: 600px){
							
		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;		
		}
		

		#cv, #jeu_1, #jeu_2, #id_google_play{
			border: none;
			cursor: pointer;
			width: 100%;
			font-size: 8px;
			box-shadow: -2px -2px 4px lightgrey;
			background: linear-gradient(to right, rgb(220,255,255), rgb(255,225,255), rgb(240,255,220));
			padding: 6px;
		}
		
		#cv:hover, #jeu_1:hover, #jeu_2:hover, #id_google_play:hover{
			border-style: solid;
			border-width: 1px;
			border-image: linear-gradient(to right, rgb(120,255,255), rgb(255,125,255), rgb(210,255,150))1;
			background: linear-gradient(to right, rgb(170,255,255), rgb(255,175,255), rgb(225,255,185));
		}
		
		.mon_cv, .mes_jeux, .page_developpeur{
			width: 100%;
		}

		
		h2,h3{
			text-align: center;
			margin: 0px;
			padding: 0px;
		}
		
	
		.travaux{
			display: flex;
			flex-direction: column;
			justify-content: center;			
			align-items: center;		
			height: auto;
			width: 80%;
			margin-left: 10%;
		}
		
		
		.zone_realisation_2{
			background: linear-gradient(to right, rgb(240,240,240), rgb(230,230,230), rgb(220,220,220));
			width: 100%;
			height: 40px;
			box-shadow: 2px 2px 4px lightgrey;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
	

		.zone_realisation_3{
			height: 240px;
			background: linear-gradient(to right, rgb(240,240,240), rgb(230,230,230), rgb(220,220,220));
			width: 100%;
			box-shadow: 2px 2px 4px lightgrey;
		}

		
		canvas{
			box-shadow: 2px 2px 4px lightgrey;
		}
		
		
	

		.ligne-case{
			display: flex;
			justify-content: left;
			align-items: center;
		}
		
		.lignes-cases{
			display: flex;
			justify-content: left;
			align-items: center;

		}
		
		.case1, .case2, .case3, .case4, .case5, .case6, .case7, .case8, .case9{
			width: 12px;
			height: 12px;
			background: linear-gradient(to right, rgb(230,230,230), rgb(220,220,220), rgb(210,210,210));
			display: flex;
			justify-content: center;
			align-items: center;
			filter: drop-shadow(1px 1px 1px black);
		}
				
		.cases1, .cases2, .cases3, .cases4, .cases5, .cases6, .cases7, .cases8, .cases9{
			width: 12px;
			height: 12px;
			display: flex;
			justify-content: center;
			align-items: center;
			background: linear-gradient(to right, rgb(230,230,230), rgb(220,220,220), rgb(210,210,210));
			filter: drop-shadow(1px 1px 1px black);
		}
		

		.zone-jeu{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
		}
		
		.nom_jeu{
			text-align: center;
			font-size: 10px;
			font-weight: bolder;
		}
			
		#start{
			padding: 2px;
			font-size: 6px;
			font-weight: bolder;
		}
				

		

		.cube1{
			position: relative;
			margin-top: 30px;
			margin-bottom: 24px;
			border: 1px solid black;
			width: 36px;
			height: 36px;			
		}
		
		.cube2{
			position: relative;
			margin-top: 24px;	
			border: 1px solid black;
			width: 36px;
			height: 36px;
		}
		
		.fa-cat, .fa-dog, .fa-crown, .fa-bomb, .fa-cow, .fa-paintbrush, .fa-horse, .fa-cookie, .fa-fish{
			font-size: 6px;
		}
	#canva-wrong{
		position: absolute;
		top: 250px;
		width: 280px;
		border: none;
	}
	#erreur{
		font-weight: bolder;
		font-size: 10px;
	}
}		

@media screen and (min-width: 601px) and (max-width: 800px){
		.fa-solid{
			font-size: 16px;		
		}
}

@media screen and (min-width: 801px){
		.fa-solid{
			font-size: 24px;		
		}
}	
@media screen and (min-width: 601px) and (max-width: 1200px){
			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%;
		}		
		
		
		#cv, #jeu_1, #jeu_2, #id_google_play{
			border: none;
			cursor: pointer;
			width: 100%;
			font-size: 12px;
			box-shadow: -2px -2px 4px lightgrey;
			background: linear-gradient(to right, rgb(220,255,255), rgb(255,225,255), rgb(240,255,220));
			padding: 8px;
		}
		
		#cv:hover, #jeu_1:hover, #jeu_2:hover, #id_google_play:hover{
			border-style: solid;
			border-width: 1px;
			border-image: linear-gradient(to right, rgb(120,255,255), rgb(255,125,255), rgb(210,255,150))1;
			background: linear-gradient(to right, rgb(170,255,255), rgb(255,175,255), rgb(225,255,185));
		}
		
		.mon_cv, .mes_jeux, .page_developpeur{
			width: 100%;
		}

		
		h2,h3{
			text-align: center;
			margin: 0px;
			padding: 0px;
		}
		


		.travaux{
			display: flex;
			flex-direction: column;
			justify-content: center;			
			align-items: center;		
			height: auto;
			width: 80%;
			margin-left: 10%;
		}
		

		
		.zone_realisation_2{
			background: linear-gradient(to right, rgb(240,240,240), rgb(230,230,230), rgb(220,220,220));
			width: 100%;
			height: 70px;
			box-shadow: 2px 2px 4px lightgrey;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		

		.zone_realisation_3{
			height: 240px;
			background: linear-gradient(to right, rgb(240,240,240), rgb(230,230,230), rgb(220,220,220));
			width: 100%;
			box-shadow: 2px 2px 4px lightgrey;
		}

	

		canvas{
			box-shadow: 2px 2px 4px lightgrey;
		}
		

			#canva-wrong{
		display: none;
	}

		.ligne-case{
			display: flex;
			justify-content: left;
			align-items: center;
		}
		
		.lignes-cases{
			display: flex;
			justify-content: left;
			align-items: center;

			
		}
		
		.cube1{
			position: relative;
			left: 10%;
			border: 1px solid black;
			width: 144px;
			height: 144px;			
		}
		
		.cube2{
			position: relative;
			right: 10%;	
			border: 1px solid black;
		}

		.case1, .case2, .case3, .case4, .case5, .case6, .case7, .case8, .case9{
			width: 48px;
			height: 48px;
			background: linear-gradient(to right, rgb(230,230,230), rgb(220,220,220), rgb(210,210,210));
			display: flex;
			justify-content: center;
			align-items: center;
			filter: drop-shadow(1px 1px 1px black);
		}
				
		.cases1, .cases2, .cases3, .cases4, .cases5, .cases6, .cases7, .cases8, .cases9{
			width: 48px;
			height: 48px;
			display: flex;
			justify-content: center;
			align-items: center;
			background: linear-gradient(to right, rgb(230,230,230), rgb(220,220,220), rgb(210,210,210));
			filter: drop-shadow(1px 1px 1px black);
		}
		
		.fa-cat, .fa-dog, .fa-crown, .fa-bomb, .fa-cow, .fa-paintbrush, .fa-horse, .fa-cookie, .fa-fish{
			font-size: 18px;
		}
		

		.zone-jeu{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		
		.nom_jeu{
			text-align: center;
			font-size: 15px;
			font-weight: bolder;
		}
		

		
		#start{
			padding: 6px;
			font-weight: bolder;
		}
	

		
		.case{
			width: 48px;
			height: 48px;
			background: linear-gradient(to right, rgb(230,230,230), rgb(220,220,220), rgb(210,210,210));
			display: flex;
			justify-content: center;
			align-items: center;
			filter: drop-shadow(1px 1px 1px black);	
		}
}

@media screen and (min-width: 1201px){
		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;		
		}
		
		#cv, #jeu_1, #jeu_2, #id_google_play{
			border: none;
			cursor: pointer;
			width: 100%;
			font-size: 16px;
			box-shadow: -2px -2px 4px lightgrey;
			background: linear-gradient(to right, rgb(220,255,255), rgb(255,225,255), rgb(240,255,220));
			padding: 10px;
		}
		
		#cv:hover, #jeu_1:hover, #jeu_2:hover, #id_google_play:hover{
			border-style: solid;
			border-width: 1px;
			border-image: linear-gradient(to right, rgb(120,255,255), rgb(255,125,255), rgb(210,255,150))1;
			background: linear-gradient(to right, rgb(170,255,255), rgb(255,175,255), rgb(225,255,185));
		}
		
		.mon_cv, .mes_jeux, .page_developpeur{
			width: 100%;
		}

		
		h2,h3{
			text-align: center;
			margin: 0px;
			padding: 0px;
		}
		


		.travaux{
			display: flex;
			flex-direction: column;
			justify-content: center;			
			align-items: center;		
			height: auto;
			width: 80%;
			margin-left: 10%;
		}
		

		
		.zone_realisation_2{
			background: linear-gradient(to right, rgb(240,240,240), rgb(230,230,230), rgb(220,220,220));
			width: 100%;
			height: 100px;
			box-shadow: 2px 2px 4px lightgrey;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		

		.zone_realisation_3{
			height: 400px;
			background: linear-gradient(to right, rgb(240,240,240), rgb(230,230,230), rgb(220,220,220));
			width: 100%;
			box-shadow: 2px 2px 4px lightgrey;
		}

	

		canvas{
			box-shadow: 2px 2px 4px lightgrey;
		}
		

		

		.ligne-case{
			display: flex;
			justify-content: left;
			align-items: center;
		}
		
		.lignes-cases{
			display: flex;
			justify-content: left;
			align-items: center;

			
		}
		
		.cube1{
			position: relative;
			left: 10%;
			border: 1px solid black;
			width: 240px;
			height: 240px;			
		}
		
		.cube2{
			position: relative;
			right: 10%;	
			border: 1px solid black;
		}

		.case1, .case2, .case3, .case4, .case5, .case6, .case7, .case8, .case9{
			width: 80px;
			height: 80px;
			background: linear-gradient(to right, rgb(230,230,230), rgb(220,220,220), rgb(210,210,210));
			display: flex;
			justify-content: center;
			align-items: center;
			filter: drop-shadow(1px 1px 1px black);
		}
				
		.cases1, .cases2, .cases3, .cases4, .cases5, .cases6, .cases7, .cases8, .cases9{
			width: 80px;
			height: 80px;
			display: flex;
			justify-content: center;
			align-items: center;
			background: linear-gradient(to right, rgb(230,230,230), rgb(220,220,220), rgb(210,210,210));
			filter: drop-shadow(1px 1px 1px black);
		}
		
		.fa-cat, .fa-dog, .fa-crown, .fa-bomb, .fa-cow, .fa-paintbrush, .fa-horse, .fa-cookie, .fa-fish{
			font-size: 30px;
		}
		

		.zone-jeu{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		
		.nom_jeu{
			text-align: center;
			font-size: 20px;
			font-weight: bolder;
		}
		

		
		#start{
			padding: 10px;
			font-weight: bolder;
		}
	

		
		.case{
			width: 80px;
			height: 80px;
			background: linear-gradient(to right, rgb(230,230,230), rgb(220,220,220), rgb(210,210,210));
			display: flex;
			justify-content: center;
			align-items: center;
			filter: drop-shadow(1px 1px 1px black);	
		}

	#canva-wrong{
		display: none;
	}
}