added on all sections

index.html

@@ -36,10 +36,6 @@
 
 
 		<input type="checkbox" id="language">
-		<label id="language_label" for="language">
-			<span id="fr"><img class="flag" src="./docs/flags/fr_bnw.svg" alt="french flag"></span>
-			<span id="en"><img class="flag" src="./docs/flags/gb_bnw.svg" alt="english flag"></span>
-		</label>
 
 		<!--
 			I moved this outside the hero section,
@@ -55,6 +51,11 @@
 		-->
 		<section class="section hero" id="hero">
 
+			<label class="language_label" for="language">
+				<span id="fr"><img class="flag" src="./docs/flags/fr_bnw.svg" alt="french flag"></span>
+				<span id="en"><img class="flag" src="./docs/flags/gb_bnw.svg" alt="english flag"></span>
+			</label>
+
 			<header>
 				<h1 aria-label="hugo lamy" id="name" class="title">
 <span aria-hidden="true" class="pre pre_small">
@@ -109,6 +110,11 @@
 		-->
 		<section class="section" id="cv">
 
+			<label class="language_label" for="language">
+				<span id="fr"><img class="flag" src="./docs/flags/fr_bnw.svg" alt="french flag"></span>
+				<span id="en"><img class="flag" src="./docs/flags/gb_bnw.svg" alt="english flag"></span>
+			</label>
+
 			<header>
 				<h1 aria-label="cv" id="cv" class="title">
 <span aria-hidden="true" class="pre">
@@ -235,6 +241,12 @@
 			PROJECTS
 		-->
 		<section id="projects" class="section">
+
+			<label class="language_label" for="language">
+				<span id="fr"><img class="flag" src="./docs/flags/fr_bnw.svg" alt="french flag"></span>
+				<span id="en"><img class="flag" src="./docs/flags/gb_bnw.svg" alt="english flag"></span>
+			</label>
+
 			<div class="mouse"><div class="frames mouse_3 pre"></div></div>
 
 			<header>

styles/elements/language.css

@@ -1,16 +1,16 @@
 input#language {
 	display: none;
 }
-label#language_label {
+.language_label {
-	position: fixed;
 	position: absolute;
+	grid-column: end;
 	top: 20px;
 	right: 20px;
 	padding: 10px;
 	cursor: pointer;
 	z-index: 1;
 }
-label#language_label .flag {
+.language_label .flag {
 	width: 20px;
 }
 
@@ -19,10 +19,10 @@ label#language_label .flag {
 /*
 * FR
 */
-input#language:not(:checked) + label #fr {
+input#language:not(:checked) ~ * .language_label #fr {
 	display: inline;
 }
-input#language:checked + label #fr {
+input#language:checked ~ * .language_label #fr {
 	display: none;
 }
 input#language:not(:checked) ~ * span.fr {
@@ -37,10 +37,10 @@ input#language:checked ~ * span.fr {
 /*
 * EN
 */
-input#language:not(:checked) + label #en {
+input#language:not(:checked) ~ * .language_label #en {
 	display: none;
 }
-input#language:checked + label #en {
+input#language:checked ~ * .language_label #en {
 	display: inline;
 }
 input#language:not(:checked) ~ * span.en {
@@ -49,4 +49,3 @@ input#language:not(:checked) ~ * span.en {
 input#language:checked ~ * span.en {
 	display: none;
 }
-