still nothing broken, i started adding a glittery star effect to the rank in ProfileDisplay, fun stuff, figured it out but need to complete it

srcs/requirements/svelte/api_front/src/ProfileDisplay.svelte

@@ -54,7 +54,7 @@
   <div>{user.image_url}</div>
   <img class="icon" src="{user.image_url}" alt="default user icon">
   <div>{user.username}</div>
-  <div>Rank: {rank}</div>
+  <div class="rank">Rank: <span class="glitter">{rank}</span></div>
   <section class="main-stats">
     <h4>Match Statistics</h4>
     <p>Total: {user.stats.totalGame}</p>
@@ -114,4 +114,52 @@
     grid-column: 1 / span 3;
   }
 
+  @keyframes background-pan {
+    from {
+      background-position: 0% center;
+    }
+    to {
+      background-position: -200% center;
+    }
+  }
+
+  div.rank {
+    /* color: black; */
+    font-size: 1.5em;
+    font-weight: bold;
+  }
+
+  :root {  
+    --purple: rgb(123, 31, 162);
+    --violet: rgb(103, 58, 183);
+    --pink: rgb(244, 143, 177);
+  }
+
+
+
+  div > .glitter {
+    animation: background-pan 3s linear infinite;
+    /* background-image: linear-gradient( */
+    background: linear-gradient(
+      to right,
+      var(--purple),
+      var(--violet),
+      var(--pink),
+      var(--purple)
+    );
+    background-size: 200%;
+    
+    /* Keep these for Safari and chrome */
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+
+    /* These are for Firefox */
+    background-clip: text;
+    color: transparent;
+
+    white-space: nowrap;
+  }
+
+
+
 </style>

srcs/requirements/svelte/api_front/src/ProfileSettings.svelte

@@ -70,14 +70,15 @@
         <input type="text" placeholder="new username" bind:value={set.username}>
         <div class="error">{errors.username}</div>
       </div>
-      <div class="form-field">
+      <!-- <div class="form-field">
         <div class="label">Set Two Factor Authentication</div>
         <input type="checkbox" bind:checked={set.isChecked}>
         <div class="error">{errors.checkbox}</div>
-      </div>
+      </div> -->
       <div class="form-field">
         <div class="label">Test</div>
         <input type="checkbox" bind:checked={testChecked}>
+        <!-- This does work :) -->
       </div>
       <button>Update Settings</button>
     </form>