diff --git a/about.html b/about.html
index c1a76e9..6fb4553 100644
--- a/about.html
+++ b/about.html
@@ -3,6 +3,7 @@
 	<head>
 		<meta charset="utf-8">
 		<meta name="description" content="Pokétest is an interactive browser game, where you have to find the name of Pokémons!">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<link rel="stylesheet" type="text/css" href="normalize-8.0.1.css" id="stylesheet">
 		<link rel="stylesheet" type="text/css" href="style.css" id="stylesheet">
 		<link rel="shortcut icon" type="image/png" href="img/favicon.png" />
@@ -17,6 +18,9 @@
 			<header>
 				<a href="index.html"><img src="img/logo.png" alt="Pokétest" /></a>
 				<nav>
+					<div id="hamburger">
+						<div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
+					</div>
 					<ul>
 						<li><a href="flashdex.html">Flashdex</a></li>
 						<li><a href="about.html">About</a></li>
@@ -32,11 +36,10 @@
 						<li><a href="#2">What is this website made with?</a></li>
 						<li><a href="#3">Can I use my keyboard to play?</a></li>
 						<li><a href="#4">What is the «Infinite» option in the number of questions exactly?</a></li>
-						<li><a href="#5">This website doesn't work well with mobile devices.</a></li>
-						<li><a href="#6">This website doesn't work well on my browser.</a></li>
-						<li><a href="#7">Can you add more languages?</a></li>
-						<li><a href="#8">Can you add this feature?</a></li>
-						<li><a href="#9">Copyrights</a></li>
+						<li><a href="#5">This website doesn't work well on my browser.</a></li>
+						<li><a href="#6">Can you add more languages?</a></li>
+						<li><a href="#7">Can you add this feature?</a></li>
+						<li><a href="#8">Copyrights</a></li>
 					</ul>
 
 					<h3 id="1">Who are you?</h3>
@@ -59,27 +62,24 @@
 					<p>When playing with the Infinite option, the game ends when you have 5 bad answers on all the set.</p>
 
 					<img src="pokemon/60RB.png" class="middle-companion" alt="poliwag" />
-
-					<h3 id="5">This website doesn't work well with mobile devices.</h3>
-					<p>This is something I'll be working on... someday... promise!</p>
 					
-					<h3 id="6">This website doesn't work well on my browser.</h3>
+					<h3 id="5">This website doesn't work well on my browser.</h3>
 					<p>Please contact me or make a pull request!</p>
 					
-					<h3 id="7">Can you add more languages?</h3>
+					<h3 id="6">Can you add more languages?</h3>
 					<p>The game currently supports all of the languages available in the main games. If your language is not on the list, it probably uses the English names! I will not support other languages by myself, but you can always contribute by making a pull request!</p>
 
-					<h3 id="8">Can you add this feature?</h3>
+					<h3 id="7">Can you add this feature?</h3>
 					<p>Please contact me or make a pull request!</p>
 					
-					<h3 id="9">Copyrights</h3>
+					<h3 id="8">Copyrights</h3>
 					<p>The Pokémon names, the associated artworks and the Pokémon licence is trademarked by <strong>Nintendo</strong> and <strong>The Pokémon Company</strong>, 1996 - 2022.<br />
 					All the Pokémon artworks were taken from <a href="https://bulbapedia.bulbagarden.net/wiki/Main_Page">Bulbapedia</a>, that I'd like to thank for their huge work for the Pokémon community.</p>
 				</div>
 			</article>
 		</div>
 		<footer>
-			<p>© 2012 - 2022 Pokétest 2.6</p>
+			<p>© 2012 - 2022 Pokétest 2.7</p>
 		</footer>
 	</body>
 </html>
\ No newline at end of file
diff --git a/flashdex.html b/flashdex.html
index 3ed263a..f6a0a87 100644
--- a/flashdex.html
+++ b/flashdex.html
@@ -3,6 +3,7 @@
 	<head>
 		<meta charset="utf-8">
 		<meta name="description" content="Pokétest is an interactive browser game, where you have to find the name of Pokémons!">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<link rel="stylesheet" type="text/css" href="normalize-8.0.1.css" id="stylesheet">
 		<link rel="stylesheet" type="text/css" href="style.css" id="stylesheet">
 		<link rel="shortcut icon" type="image/png" href="img/favicon.png" />
@@ -18,6 +19,9 @@
 			<header>
 				<a href="index.html"><img src="img/logo.png" alt="Pokétest" /></a>
 				<nav>
+					<div id="hamburger">
+						<div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
+					</div>
 					<ul>
 						<li><a href="flashdex.html">Flashdex</a></li>
 						<li><a href="about.html">About</a></li>
@@ -31,25 +35,27 @@
 
 						<h1>Flashdex</h1>
 
+						<p>meilleur texte...</p>
+
 						<p>Well, well, well! This is the simplest Pokédex you'll find in the web, which is useful to see your favorite creatures in good resolution. Furthermore, you can see all the new Pokémons that are announced because we are adding them really fast! This page is perfect to learn those new names, so let's get started!</p>
 
 						<div id="flashdex_config">
 							<h2><a href="#" class="all unselected"><strong>Select all</strong></a></h2>
 							<p>
-								<input type="checkbox" name="1g" id="1g"><label for="1g"><strong><span class="RB1">1</span><span class="RB2">G</span></strong></label>
-								<input type="checkbox" name="2g" id="2g"><label for="2g"><strong><span class="GS1">2</span><span class="GS2">G</span></strong></label>
-								<input type="checkbox" name="3g" id="3g"><label for="3g"><strong><span class="RS1">3</span><span class="RS2">G</span></strong></label>
-								<input type="checkbox" name="4g" id="4g"><label for="4g"><strong><span class="DP1">4</span><span class="DP2">G</span></strong></label>
-								<br />
-								<input type="checkbox" name="5g" id="5g"><label for="5g"><strong><span class="BW1">5</span><span class="BW2">G</span></strong></label>
-								<input type="checkbox" name="6g" id="6g"><label for="6g"><strong><span class="XY1">6</span><span class="XY2">G</span></strong></label>
-								<input type="checkbox" name="7g" id="7g"><label for="7g"><strong><span class="SM1">7</span><span class="SM2">G</span></strong></label>
-								<input type="checkbox" name="8g" id="8g"><label for="8g"><strong><span class="SWSH1">8</span><span class="SWSH2">G</span></strong></label>
-								<br />
+								<span class="generation">
+									<span class="gen"><input type="checkbox" name="1g" id="1g"><label for="1g"><strong><span class="RB1">1</span><span class="RB2">G</span></strong></label></span>
+									<span class="gen"><input type="checkbox" name="2g" id="2g"><label for="2g"><strong><span class="GS1">2</span><span class="GS2">G</span></strong></label></span>
+									<span class="gen"><input type="checkbox" name="3g" id="3g"><label for="3g"><strong><span class="RS1">3</span><span class="RS2">G</span></strong></label></span>
+									<span class="gen"><input type="checkbox" name="4g" id="4g"><label for="4g"><strong><span class="DP1">4</span><span class="DP2">G</span></strong></label></span>
+									<span class="gen"><input type="checkbox" name="5g" id="5g"><label for="5g"><strong><span class="BW1">5</span><span class="BW2">G</span></strong></label></span>
+									<span class="gen"><input type="checkbox" name="6g" id="6g"><label for="6g"><strong><span class="XY1">6</span><span class="XY2">G</span></strong></label></span>
+									<span class="gen"><input type="checkbox" name="7g" id="7g"><label for="7g"><strong><span class="SM1">7</span><span class="SM2">G</span></strong></label></span>
+									<span class="gen"><input type="checkbox" name="8g" id="8g"><label for="8g"><strong><span class="SWSH1">8</span><span class="SWSH2">G</span></strong></label></span>
+								</span>
 								<span class="alternate_forms">Alternate forms</span>
-								<input type="checkbox" name="regional" id="regional"><label for="regional"><strong>Regional</strong></label>
-								<input type="checkbox" name="mega" id="mega"><label for="mega"><strong>Mega-Evolution</strong></label>
-								<input type="checkbox" name="gigantamax" id="gigantamax"><label for="gigantamax"><strong>Gigantamax</strong></label>
+								<span class="gen"><input type="checkbox" name="regional" id="regional"><label for="regional"><strong>Regional</strong></label></span>
+								<span class="gen"><input type="checkbox" name="mega" id="mega"><label for="mega"><strong>Mega-Evolution</strong></label></span>
+								<span class="gen"><input type="checkbox" name="gigantamax" id="gigantamax"><label for="gigantamax"><strong>Gigantamax</strong></label></span>
 							</p>
 
 							<p>
@@ -79,7 +85,7 @@
 			</article>
 		</div>
 		<footer>
-				<p>© 2012 - 2022 Pokétest 2.6</p>
+				<p>© 2012 - 2022 Pokétest 2.7</p>
 		</footer>
 	</body>
 </html>
diff --git a/index.html b/index.html
index 4c9612e..99b415a 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,7 @@
 	<head>
 		<meta charset="utf-8">
 		<meta name="description" content="Pokétest is an interactive browser game, where you have to find the name of Pokémons!">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<link rel="stylesheet" type="text/css" href="normalize-8.0.1.css" id="stylesheet">
 		<link rel="stylesheet" type="text/css" href="style.css" id="stylesheet">
 		<link rel="shortcut icon" type="image/png" href="img/favicon.png" />
@@ -17,6 +18,9 @@
 			<header>
 				<a href="index.html"><img src="img/logo.png" alt="Pokétest" /></a>
 				<nav>
+					<div id="hamburger">
+						<div class="container"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>
+					</div>
 					<ul>
 						<li><a href="flashdex.html">Flashdex</a></li>
 						<li><a href="about.html">About</a></li>
@@ -124,8 +128,8 @@
 									<option name="time" id="5" value="5" selected>5</option>
 									<option name="time" id="10" value="10">10</option>
 									<option name="time" id="30" value="30">30</option>
-									<option name="time" id="30" value="30">99</option>
-									<!--<option name="time" id="10000" value="10000">10000 (debug)</option>-->
+									<option name="time" id="99" value="99">99</option>
+									<option name="time" id="10000" value="10000">10000 (debug)</option>
 								</select> seconds
 							</div>
 						</div>
@@ -138,11 +142,11 @@
 			</article>
 		</div>
 		<footer>
-				<p>© 2012 - 2022 Pokétest 2.6</p>
+				<p>© 2012 - 2022 Pokétest 2.7</p>
 			</div>
 		</footer>
 		<script>
 			!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
 		</script>
 	</body>
-</html>
+</html>
\ No newline at end of file
diff --git a/interface.js b/interface.js
index a3d1681..86eeee4 100644
--- a/interface.js
+++ b/interface.js
@@ -89,4 +89,23 @@ $(document).ready(function() {
 	$('#configuration input#select').click(function() {
 		$('#selected_options').slideDown();
 	});
+
+
+
+	// hamburger mobile
+	$("#hamburger .container").click(function()
+	{
+		if ($("nav").hasClass("active"))
+		{
+			$("ul").slideUp(200, function()
+			{
+				$("nav").removeClass("active");
+			});
+		}
+		else
+		{
+			$("nav").addClass("active");
+			$("ul").slideDown(200);
+		}
+	});
 });
diff --git a/poketest.js b/poketest.js
index 2a24423..05a84c0 100644
--- a/poketest.js
+++ b/poketest.js
@@ -244,10 +244,10 @@ $(document).ready(function() {
 			$('article #container .chrono').empty().append(chrono);
 			$('article #container .whois').empty().append("Who's that Pokémon? " + (!infinite? " ("+questions+"/"+max_questions+")" : ""));
 			$('article #container .pokemon').empty().append('<img src="pokemon/'+image_name+'.png" class="'+(silhouette)+'" />');
-			$('article #container #answers').empty().append('<input type="submit" class="option a1" name="a1" value="'+options[0]+'">')
-			$('article #container #answers').append('<input type="submit" class="option a2" name="a2" value="'+options[1]+'">')
-			$('article #container #answers').append('<input type="submit" class="option a3" name="a3" value="'+options[2]+'">')
-			$('article #container #answers').append('<input type="submit" class="option a4" name="a4" value="'+options[3]+'">')
+			$('article #container #answers').empty().append('<span><input type="submit" class="option a1" name="a1" value="'+options[0]+'"></span>')
+			$('article #container #answers').append('<span><input type="submit" class="option a2" name="a2" value="'+options[1]+'"></span>')
+			$('article #container #answers').append('<span><input type="submit" class="option a3" name="a3" value="'+options[2]+'"></span>')
+			$('article #container #answers').append('<span><input type="submit" class="option a4" name="a4" value="'+options[3]+'"></span>')
 
 			// timer setting
 			var clock = setInterval(function() {
@@ -257,7 +257,7 @@ $(document).ready(function() {
 					showAnswer(false); // timer has ended, so it's a bad answer
 				}
 				$('article #container .chrono').empty().append(chrono);
-			}, 1000);
+			}, 10000000);
 
 			// checking if the answer is good or not
 			$('article .option').click(function() {
@@ -295,7 +295,7 @@ $(document).ready(function() {
 						if (!infinite)	questions < max_questions ? game() : score();
 						else			bad_answers < max_infinite_errors ? game() : score();
 					}
-				}, 1000);
+				}, 100000000);
 			}
 
 			function score() {
diff --git a/style.css b/style.css
index 9b0fc49..c4695d4 100644
--- a/style.css
+++ b/style.css
@@ -18,7 +18,7 @@ h3 { font-variant: small-caps; }
 /**** HEADER ****/
 
 header {
-	height:14vh;
+	height:10vh;
 	background: #2f2e2e;
 	display: flex;
 	justify-content: space-between;
@@ -27,13 +27,13 @@ header {
 header img {
 	display: flex;
 	align-items: flex-start;
-	height: 12.5vh;
-	margin-left: 8vw; margin-top: 0.75vh;
+	height: 9vh;
+	margin-left: 8vw; padding-top: 0.4vh;
 }
 
 header nav {
 	display: flex; align-items: flex-end;
-	margin-right: 8vw; margin-bottom: 5vh;
+	margin-right: 8vw; margin-bottom: 3vh;
 }
 
 header nav ul, header nav ul li {
@@ -67,7 +67,7 @@ article #container {
 
 article #container .companion {
 	float: right;
-	width: 280px;
+	width: 260px;
 	margin-left: 15px;
 }
 
@@ -167,7 +167,7 @@ article #container #game #configuration #right_config { float: right; }
 
 article #container #game .button {
 	margin: auto;
-	padding: 20px; padding-top: 30px;
+	padding: 20px;
 	clear: both;
 	text-align: center;
 }
@@ -191,8 +191,8 @@ article #container input[type=submit]:hover {
 
 /**** GAME LAUNCHED ****/
 
-article #container.game_active { height: 68vh; }
-article #container #top_game { display: flex; justify-content: space-between; height: 8vh; }
+article #container.game_active { height: 72vh; }
+article #container #top_game { display: flex; justify-content: space-between; height: 10vh; }
 article #container #top_game .whois { display: flex; align-items: flex-start; }
 
 article #container #top_game .chrono {
@@ -217,14 +217,14 @@ article #container .pokemon img.silhouette { filter: contrast(0%) brightness(170
 
 article #container #answers {
 	text-align: center;
-	height: 10vh;
+	height: 14vh;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 }
 
 article #container #answers input { margin-right: 30px; display: inline; }
-article #container #answers input:last-child { margin-right: 0px; }
+article #container #answers input:last-child { margin-right: 30px; }
 
 article #container #answers .final_answer { font-size: 23px; }
 article #container #answers .final_answer .good { color:#3ad48d; font-weight:bold; }
@@ -303,18 +303,17 @@ article #container.diploma #score {
 #game #flashdex_config h2 { text-decoration: underline; font-size: 1.05em; margin-top: 25px; }
 #game #flashdex_config span.alternate_forms { margin-top: 20px; margin-bottom: 0px; display: block; font-variant: small-caps; font-size: 19px; }
 
-#game #flashdex_config p.button { padding: 0px; margin-top: 20px; }
-
 #loading {
 	display: block;
 	font-size: 1.5em;
 	text-align: center;
-	margin-top:15px;
+	margin-top: 15px;
+	margin-bottom: 15px;
 }
 
 #container #game #flashdex {
 	margin:auto;
-	display:inline-block;
+	display:none;
 	text-align:center;
 	margin-top:2vh;
 }
@@ -357,5 +356,192 @@ span.form.mega { background-image: url('img/icon_mega.png'); }
 span.form.giga { 
 	background-image: url('img/icon_giga.png'); background-color: white;
 	background-position: center; background-size:20px;
-	border-radius:50%; border: 1px solid white;
+	border-radius: 50%; border: 1px solid white;
+}
+
+
+
+
+/*** MOBILE ***/
+
+@media screen and (max-width:1100px) {
+	article #container {
+		margin-left: 5vw;
+		margin-right: 5vw;
+	}
+}
+
+@media screen and (max-width:800px) {
+	
+	h1 { margin: 0.2em 0; font-size:1.3em; }
+	h2 { font-size:1.25em; }
+	h3 { margin: 10px; margin-left: 0; }
+
+	header { height: 12vh; }
+	header img { height: 11vh; margin-left: 4vw; }
+	header nav ul { display: none; }
+
+	#content-wrap { padding-bottom: 8vh; }
+
+	article { margin-top: 2vh; }
+
+	article #container {
+		margin-left: 4vw;
+		margin-right: 4vw;
+		padding: 5px 10px;
+		border-radius: 18px;
+	}
+
+	article #container #game #configuration #left_config { float: none; }
+	article #container #game #configuration #right_config { float: none; }
+
+	article #container #game #configuration input[name="gen"], article #container #game #selected_options input,
+	article #container #game #configuration .first { margin-left:15px; margin-bottom:5px; }
+
+	article #container #game .button { padding: 10px; padding-top: 20px; }
+
+	article #container #game #configuration input[type="checkbox"] {
+		margin-left: 15px;
+		margin-top: 7px;
+		margin-bottom: 8px;
+	}
+
+	article #container input[type="submit"] {
+		padding: 6px;
+		border: 2px;
+		border-radius: 8px;
+		font-size: 16px;
+		margin: 4px;
+	}
+
+	article #container.game_active {
+		max-height: 76vh;
+		height: auto;
+	}
+
+	article #container #answers {
+		height: 100%;
+		display: block;
+	}
+
+	article #container #answers input:last-child { margin-right: 0px; }
+
+	article #container.game_active div#answers span {
+		display: block;
+	}
+	article #container.diploma #score {
+		background: none;
+	}
+	article #container #seed input {
+		width: 90%;
+		margin-top: 10px;
+	}
+	article #container.diploma #score {
+		padding: 0px;
+	}
+	article #container.diploma {
+		border: none;
+	}
+
+	article #container .pokemon img {
+		height: 37vh;
+		margin-top: 1vh;
+	}
+
+
+
+
+
+	
+	article #container .top-companion, article #container .companion {
+		display: none;
+	}
+
+	article #container .middle-companion {
+		width: 250px;
+		margin: auto;
+		display: block;
+	}
+
+	article #container.about ul {
+		margin-left: 10px;
+		padding-left: 5px;
+	}
+
+	article #container.about p { margin-left: 0px; }
+
+	#container #game #flashdex .pokedex { width: 230px; height: 260px; }
+	#container #game { text-align: justify; }
+	#game #flashdex .pokedex img { height: 225px; }
+
+	#game #flashdex_config p { text-align: left; }
+
+	#game #flashdex_config .generation {
+		position: relative;
+		display: flex;
+		flex-direction: row;
+		justify-content: space-around;
+		flex-wrap: wrap;
+		width: 60%;
+	}
+
+	#game #flashdex_config .generation .gen {
+		display: block;
+		position: relative;
+		padding: 10px;
+		width:15%;
+	}
+
+	#game #flashdex_config .gen { padding: 0; margin: 0; margin-left: 15px; display: block; }
+	#game #flashdex_config .gen label { padding: 2px; margin: 2px; margin-left: 8px; }
+
+	#game #flashdex_config select.lang { margin-left: 15px; margin-top:5px; }
+
+	#game #flashdex_config p.button { padding-top: 15px; margin-top: 15px; }
+
+	article #container #game .button {
+		padding: 10px; padding-top: 15px;
+	}
+
+	footer { height:6vh; }
+
+
+
+	header {
+		display:block;
+		height: 12vh;
+		margin-top: 0px;
+		padding: 0px;
+	}
+
+	header nav {
+		display: auto;
+		align-items: auto;
+		margin-right: auto;
+		margin-bottom: auto;
+	}
+
+	header nav #hamburger {
+		position: absolute;
+		margin-top: 0rem;
+		top: 1rem;
+		right: 1rem;
+	}
+
+	header nav #hamburger .bar1,
+	header nav #hamburger .bar2,
+	header nav #hamburger .bar3 { width:30px; height:3px; background-color:#ff3636; margin:6px 0; transition:0.4s; }
+		
+	header nav.active #hamburger .bar1 { transform:rotate(-45deg) translate(-4px, 6px); }
+	header nav.active #hamburger .bar2 { opacity:0; }
+	header nav.active #hamburger .bar3 { transform:rotate(45deg) translate(-6px, -9.5px); }
+
+	header nav.active ul {
+		margin: auto;
+		background: #2f2e2e;
+		width: 100%;
+		text-align:center;
+		padding: 10px;
+		z-index:0;
+	}
 }
\ No newline at end of file
