@media screen and (max-width: 600px){
							
		body{
			margin: 0px;
			padding: 0px;
			font-family: Calibri, Sans Serif;			
		}
		
		.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: center;
			justify-content: center;
			margin: 0px;
			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: 24px;		
		}


		#cv, #jeu_1, #jeu_2, #id_google_play, #choisir_couleur, #titre-select{
			outline: none;
			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;
		}
		#groupe-select{
			display: flex;
			width: 100%;
		}
		
		#titre-select{
			width: 50%;
			text-align: center;
		}
		#choisir_couleur{
			width: 50%;
			font-weight: bold;
			text-align: center;
		}
		#cv:hover, #jeu_1:hover, #jeu_2:hover, #id_google_play:hover,  #titre-select:hover, #choisir_couleur: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: 220px;
			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: 20px;
			height: 20px;
			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: 20px;
			height: 20px;
			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;
			justify-content: space-between;
			align-items: center;
		}
		
		.nom_jeu{
			text-align: center;
			font-size: 8px;
			font-weight: bolder;
		}
			
		#boutons_jeu{
			 display: flex;
			 flex-direction: column;
			 justify-content: space-between;
			 align-items: center;
			 height: 30px;
		}
		
		#start, #pause, #rejouer, #pas_rejouer{
			padding: 2px;
			font-size: 6px;
			font-weight: bolder;
			box-shadow: 1px 1px 1px rgb(150,150,150);
			background: linear-gradient(to right, rgb(230,230,230), rgb(240,240,240), rgb(250,250,250));
			border-radius: 2px;
		}
				

		.cube1{
			position: relative;
			left: 10%;
			border: 1px solid black;
			width: 60px;
			height: 60px;			
		}
		
		.cube2{
			position: relative;
			right: 10%;	
			border: 1px solid black;
			width: 60px;
			height: 60px;	
		}
		
		
		.fa-cat, .fa-dog, .fa-crown, .fa-bomb, .fa-cow, .fa-paintbrush, .fa-horse, .fa-cookie, .fa-fish{
			font-size: 10px;
		}
	#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: 24px;		
		}
}

@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;
			
		}
		
		.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, #choisir_couleur, #titre-select{
			outline: none;
			border: none;
			cursor: pointer;
			width: 100%;
			font-size: 10px;
			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;
		}
		#groupe-select{
			display: flex;
			width: 100%;
		}
		
		#titre-select{
			width: 50%;
			text-align: center;
		}
		#choisir_couleur{
			width: 50%;
			font-weight: bold;
			text-align: center;
		}
		#cv:hover, #jeu_1:hover, #jeu_2:hover, #id_google_play:hover,  #titre-select:hover, #choisir_couleur: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: 380px;
			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;
			width: 144px;
			height: 144px;	
		}

		.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;
		}
		
		#boutons_jeu{
			 display: flex;
			 flex-direction: column;
			 justify-content: space-between;
			 align-items: center;
			 height: 80px;
		}
		
		#start, #pause, #rejouer, #pas_rejouer{
			padding: 6px;
			font-weight: bolder;
			box-shadow: 1px 1px 1px rgb(150,150,150);
			background: linear-gradient(to right, rgb(230,230,230), rgb(240,240,240), rgb(250,250,250));
			border-radius: 2px;
		}
	
		#start:hover, #pause:hover, #rejouer:hover, #pas_rejouer:hover{
			cursor: pointer;
		}

		.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;
			
		}
		
		.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, #choisir_couleur, #titre-select{
			outline: none;
			border: none;
			cursor: pointer;
			width: 100%;
			font-size: 14px;
			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;
		}
		
		#groupe-select{
			display: flex;
			width: 100%;
		}
		
		#titre-select{
			width: 50%;
			text-align: center;
		}
		#choisir_couleur{
			width: 50%;
			font-weight: bold;
			text-align: center;
		}
		

		#cv:hover, #jeu_1:hover, #jeu_2:hover, #id_google_play:hover, #titre-select:hover, #choisir_couleur: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: 540px;
			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;
			width: 240px;
			height: 240px;	
		}

		.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, #pause, #rejouer, #pas_rejouer{
			padding: 10px;
			font-weight: bolder;
			box-shadow: 1px 1px 1px rgb(150,150,150);
			background: linear-gradient(to right, rgb(230,230,230), rgb(240,240,240), rgb(250,250,250));
			border-radius: 2px;
		}
	
		#start:hover, #pause:hover, #rejouer:hover, #pas_rejouer:hover{
			cursor: pointer;
		}
		
		#boutons_jeu{
			 display: flex;
			 flex-direction: column;
			 justify-content: space-between;
			 align-items: center;
			 height: 120px;
		}
		
		.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;
	}
}