html,body{width: 100%; height: 100%; margin:0;}
	body{margin-left: auto; margin-right: 20px; hyphens: auto;}
	
	
	div.question{border-style: none; width:80%; position: center; margin-left:10%;margin-right: 10%;
			background-color: white;
			}
	
	#nav2 a{background-color: silver; font-size:0.9em; display: flex; flex-direction: column;}
	.header{position: sticky; top: 0em; z-index: 1;}
	.header1{position: sticky; top: 3em; z-index: 1; background-color: lightblue;}
	#haut{color: white; background-color: lightblue; margin: 0 0 10px 0; animation: tourneX 1s forwards;}
	
	#bouton{position: fixed; top: 10em; right:5em; z-index: 1;}
	#aide{position: fixed; top: 20em; right:2em; z-index: 0;}
	
	h1{color: red;width: 100%;}
	h4{color: blue;}
	h3{color: green;}
	h2{color : blue;}
	
	
	.conteneur{display: grid;
			grid-template-columns: 80% 20%;
			grid-template-rows: repeat(1, 1fr);
			grip-row-gap: 2px;
			grid-template-areas:
			"zone1 zone2";
			width: 100%;
	}
	
	/* Small devices (portrait tablets and large phones, 600px and up) */
	@media only screen and (min-width: 600px) {
	.conteneur1{display: grid;
			grid-template-columns: 100%;
			grid-template-rows: repeat(2, 1fr);
			grip-row-gap: 2px;
			grid-template-areas:
			"zone1" 
			"zone2";
			width: 100%;
			}
	
	}
	
	/* Extra large devices (large laptops and desktops, 1200px and up) */
	@media only screen and (min-width: 1200px) {
	.conteneur1{display: grid;
			grid-template-columns: 50% 50%;
			grid-template-rows: repeat(1, 1fr);
			grip-row-gap: 2px;
			grid-template-areas:
			"zone1 zone2";
			width: 100%;
	}
	}	
	
	.gauche{grid-area: zone1;position: center;}
	.droite{grid-area: zone2;}
	
	
	/* Extra small devices (phones, 600px and down) */
	@media only screen and (max-width: 600px) {
		body,button{font-size: 0.7em;}
		.titre{font-size: 1em;}
		.courbe {width: 95%;}
		div.exe{border-style: none; width:90%; position: center; margin-left:5%;margin-right: 5%;
			background-color: rgb(182,185,86,0.9);
			height: 100%;overflow-y: scroll; scrollbar-color: blue lightblue; scrollbar-width: auto;
			}
		
	}

	/* Small devices (portrait tablets and large phones, 600px and up) */
	@media only screen and (min-width: 600px) {
		body,button{font-size: 0.8em;}
		.titre{font-size: 1.3em;}
		.courbe {width: 92%;}
		div.exe{border-style: none; width:90%; position: center; margin-left:5%;margin-right: 5%;
			background-color: rgb(182,185,86,0.9);
			height: 100%;overflow-y: scroll; scrollbar-color: blue lightblue; scrollbar-width: auto;
			}
	}

	/* Medium devices (landscape tablets, 768px and up) */
	@media only screen and (min-width: 768px) {
		body,button{font-size: 0.9em;}
		.titre{font-size: 2.5em;}
		.courbe {width: 90%;}
		div.exe{border-style: none; width:90%; position: center; margin-left:5%;margin-right: 5%;
			background-color: rgb(182,185,86,0.9);
			height: 100%;overflow-y: scroll; scrollbar-color: blue lightblue; scrollbar-width: auto;
			}
		



	
	/* Large devices (laptops/desktops, 992px and up) */
	@media only screen and (min-width: 992px) {
		body,button{font-size: 1.1em;}
		.titre {font-size: 3em;}
		.courbe {width: 88%;}
		div.exe{border-style: none; width:80%; position: center; margin-left:10%;margin-right: 10%;
			background-color: rgb(182,185,86,0.9);
			height: 100%;overflow-y: scroll; scrollbar-color: blue lightblue; scrollbar-width: auto;
			}
		
	} 

	/* Extra large devices (large laptops and desktops, 1200px and up) */
	@media only screen and (min-width: 1200px) {
		body,button{font-size: 1.2em;}
		.titre {font-size: 4em;}
		.courbe {width: 85%;}
		div.exe{border-style: none; width:80%; position: center; margin-left:10%;margin-right: 10%;
			background-color: rgb(182,185,86,0.9);
			height: 100%;overflow-y: scroll; scrollbar-color: blue lightblue; scrollbar-width: auto;
			}
		
	}
	
	
	
	#background-container{
			position: absolute;
			width: 100%;
			height: 100%;
			display: bock;
			z-index: -1;
			background-position: center center;
			
	}