css

styles.css

@@ -98,16 +98,6 @@ body.dark-mode {
     margin-top: 20px;
 }
 
-@media screen and (max-width: 800px) {
-    .leftcolumn, .rightcolumn {   
-        width: 100%;
-        padding: 0;
-    }
-    .header {
-        line-height: 1.2;
-    }
-}
-
 /* New styles */
 
 .flex {
@@ -168,6 +158,7 @@ body.dark-mode {
 
 .badge-container {
     display: flex;
+    flex-wrap: wrap; /* Allow badges to wrap to the next line */
     gap: 0; /* This will remove any space between the elements */
 }
 
@@ -300,4 +291,15 @@ body.dark-mode {
   #toggle-container span {
     font-size: 16px; /* Set the font size to your desired value */
   }
-
+  @media screen and (max-width: 800px) {
+    .leftcolumn, .rightcolumn {   
+        width: 100%;
+        padding: 0;
+    }
+    .header {
+        line-height: 1.2;
+    }
+    .badge-container a {
+        margin-right: 10px; /* Reduce margin for smaller screens */
+    }
+}