Change the language icon to the top of the page.

frontend/src/lib/css/cv.css

@@ -52,6 +52,18 @@
         flex-direction: column;
     }
 
+    .lang-btn-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        position: absolute;
+        right: 0;
+        top: 0;
+        margin-right: 5rem;
+        margin-top: 1.5rem;
+    }
+
     .footer-text p {
         font-family: 'Urbanist', sans-serif;
         font-weight: 600;
@@ -278,6 +290,16 @@ h2 {
     text-decoration: none;
 }
 
+.lang-btn {
+    background-color: var(--color-background) !important;
+    color: var(--color-text) !important;
+}
+
+.lang-btn:hover {
+    background-color: var(--color-text) !important;
+    color: var(--color-background) !important;
+}
+
 .footer-text svg {
     margin: 0;
 }
@@ -287,6 +309,7 @@ h2 {
     color: var(--color-subtitle);
 }
 
+.footer-btn:active,
 .footer-btn:active {
     transform: translateY(3px);
 }
@@ -294,3 +317,11 @@ h2 {
 .footer-btn:hover>img {
     filter: none;
 }
+
+.none {
+    display: none;
+}
+
+.flag-little {
+    width: fit-content;
+}

frontend/src/routes/lang=[lang]/+page.svelte

@@ -115,6 +115,14 @@
             <SvgIcon size="23" path={mdiAccount} type="mdi" />
           {/if}
         </button>
+
+        <button
+          class={scrollY <= 53 ? "none" : "topbar-button"}
+          on:click={() => (window.location.href = `/lang=${otherlang}`)}
+        >
+          <span class={`fi fi-${flag} flag-little`}></span>
+        </button>
+
         <h1 class={scrollY <= 53 ? "topbar-name" : "topbar-name-little"}>
           {cv.info.full_name}
         </h1>
@@ -124,6 +132,15 @@
     <!-- MAIN DIV (RIGHT: desktop/CENTER: mobile) -->
     <div class="main">
       {#if innerWidth >= 1000}
+        <div class="lang-btn-container">
+          <button
+            class="footer-btn lang-btn"
+            on:click={() => (window.location.href = `/lang=${otherlang}`)}
+          >
+            <p>{text.lang}</p>
+            <span class={`fi fi-${flag} flag-size`}></span>
+          </button>
+        </div>
         <h1 class="name">{cv.info.full_name}</h1>
       {/if}
       <h2 class="name">{cv.info.title}</h2>
@@ -196,15 +213,7 @@
   <div class="footer" bind:this={footer}>
     <!-- Footer desktop -->
     {#if innerWidth >= 1000}
-      <div class="footer-btn-container">
+      <div />
-        <button
-          class="footer-btn"
-          on:click={() => (window.location.href = `/lang=${otherlang}`)}
-        >
-          <p>{text.lang}</p>
-          <span class={`fi fi-${flag} flag-size`}></span>
-        </button>
-      </div>
       <div class="footer-text">
         <p>
           {text.madewith}
@@ -239,15 +248,6 @@
         <p>{text.copyright} • {new Date().getFullYear()}</p>
       </div>
       <div class="footer-mobile-btn">
-        <div class="footer-btn-container">
-          <button
-            class="footer-btn"
-            on:click={() => (window.location.href = `/lang=${otherlang}`)}
-          >
-            <p>{text.lang}</p>
-            <span class={`fi fi-${flag} flag-size`}></span>
-          </button>
-        </div>
         <div class="footer-btn-container">
           <a
             class="footer-btn footer-github"