fixed design some more, loop seems to be working

static/styles.css

@@ -15,7 +15,7 @@
 
 /* Base styles */
 body, html {
-    font-family: 'Segoe UI', Arial, sans-serif;
+    font-family: 'Poppins', 'Montserrat', 'Segoe UI', Arial, sans-serif;
     margin: 0;
     padding: 0;
     overflow: hidden;
@@ -48,7 +48,7 @@ h1::after {
 #map {
     width: 100%;
     height: 100vh;
-    position: relative;
+    position: static !important;
 }
 
 main {
@@ -64,6 +64,20 @@ main {
     width: 100vw;
     z-index: 5;
 }
+nav li [role=button],
+nav li [type=button],
+nav li button {
+    background-color: rgba(255, 136, 0, 0.8);
+    color: white;
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+li a {
+    background-color: rgba(255, 136, 0, 0.8);
+}
 
 footer {
     position: fixed;
@@ -80,6 +94,16 @@ footer {
     z-index: 15;
 }
 
+table#mapistas thead tr th {
+    background-color: rgba(202,216,3,0.7);
+    color: black;
+}
+
+table#mapistas tbody tr td {
+    background-color: rgba(202,216,3,0.7);
+    color: black;
+}
+
 article {
     position: fixed;
     top: 12%; /* Space for nav */
@@ -110,7 +134,7 @@ nav {
     left: 0;
     right: 0;
     padding-left: 10vw;
-    padding-right:10vw;
+    /* padding-right:10vw; */
     background-color: rgba(189, 216, 3, 0.24);
     /* padding: var(--spacing-sm); */
     z-index: 1000;
@@ -133,6 +157,20 @@ nav ul li {
     list-style: none;
 }
 
+.desktop-menu li a {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.desktop-menu li a:hover {
+    background-color: rgb(74, 133, 34);
+    animation: pulse 1.5s infinite ease-in-out;
+    box-shadow: 0 0 -10px rgba(172, 255, 47, 0.7);
+    transition: all 0.2s ease;
+    transform: scale(1.02);
+}
+
 /* Buttons */
 button {
     transition: all 0.3s ease;
@@ -284,12 +322,14 @@ section#pinner-modal::-webkit-scrollbar-thumb {
 
 /* Notifications */
 .flashes {
-    position: relative;
+    position: absolute;
     display: flex;
+    width: max-content;
     z-index: 1001;
     border-radius: 20px;
     background-color: rgba(189, 216, 3, 0.6);
-    top: 8%;
+    top: 12vh;
+    left: 10vw;
     padding: var(--spacing-md);
     border: 2px solid rgba(0, 0, 0, 0.1);
     box-shadow: 0 4px 15px var(--shadow-color);
@@ -308,7 +348,6 @@ section#pinner-modal::-webkit-scrollbar-thumb {
     90%  { opacity: 1; transform: translateY(0); }
 }
 
-@keyframes pulse {
 @keyframes pulse {
     0% { box-shadow: 0 0 10px rgba(172, 255, 47, 0.7); }
     50% { box-shadow: 0 0 15px rgba(172, 255, 47, 0.9); }

templates/index.html

@@ -1,7 +1,7 @@
 {% extends 'base.html' %}
 
 {% block content %}
-        <div id="map" style="height: 100%; position: absolute;"></div>
+        <div id="map" style="height: 100%; position: static;"></div>
         <script>
             var map = new L.map('map', {zoomControl: false}, center=([20.57, -100.38], zoom=16));
             var user_marker = new L.marker([20.57, -100.38]);

templates/leaderboard.html

@@ -1,6 +1,6 @@
 {% extends 'secondbase.html' %}
 {% block content %}
-<div class="container" style="background-color: rgba(189, 216, 3, 0.8); padding:2rem">
+<div class="container" style="background-color: rgba(255,255,255,0.85); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(15px); padding:2rem; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
     <!-- Header -->
     <div class="header-cta">
         <h2 style="text-align: center; color: #172f01; margin-bottom: 1rem;">¡Hazte mapista y pon tu granito de fotoevidencia!</h2>
@@ -12,16 +12,16 @@
         <!-- Table column -->
         <div>
             <div style="display: flex; align-items: center; height: 300px;">
-                <table style="color: rgb(87, 90, 91); width: 100%;">
+                <table id="mapistas" style="color: rgba(202,216,3,0.7); width: 100%;">
                     <thead>
-                        <tr>
+                        <tr style="color: rgba(202,216,3,0.7);">
                             <th scope="col">Mapista</th>
                             <th scope="col">Marcador</th>
                         </tr>
                     </thead>
                     <tbody>
                     {% for leader in leaders %}
-                        <tr>
+                        <tr style="color: rgba(202,216,3,0.7);">
                             <td scope="row">{{leader.username}}</td>
                             <td scope="row">{{leader.count}}</td>
                         </tr>
@@ -58,11 +58,11 @@
                 datasets: [{
                     data: [activePercentage, inactivePercentage],
                     backgroundColor: [
-                        'rgba(100, 180, 10, 1)',
+                        'rgba(202,216,3,0.7)',
                         'rgba(87, 90, 91, 0.8)'
                     ],
                     borderColor: [
-                        'rgba(100, 180, 10, 1)',
+                        'rgba(202,216,3,0.7)',
                         'rgb(87, 90, 91)'
                     ],
                     borderWidth: 1

templates/nav.html

@@ -25,7 +25,6 @@
                 {% endif %}
                 <li><a href="/quienes" role="button" class="secondary">Somos</a></li>
                 <li><a href="/leaderboard" role="button">Bachistas ★</a></li>
-            <li><a href="/quienes#tengopreguntas" role="button" class="contrast"><i class="fas fa-question"></i></a></li>
             </ul>
         </details>
 
@@ -40,9 +39,11 @@
             {% endif %}
             <li><a href="/quienes" role="button" class="secondary">Somos</a></li>
             <li><a href="/leaderboard" role="button">Bachistas ★</a></li>
-            <li><a href="/quienes#tengopreguntas" role="button" class="contrast"><i class="fas fa-question"></i></a></li>
         </ul>
     </ul>
+    <ul class="desktop-menu">
+        <li><a style="border-radius: 100%; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; margin-right: 10px; text-decoration: none;" href="/quienes#tengopreguntas"><i style="color:white" class="fas fa-question-circle"></i></a></li>
+    </ul>
     <style>
         @media (max-width: 715px) {
             .desktop-menu {

templates/secondbase.html

@@ -65,7 +65,7 @@
         </div>
         {% endif %}
     {% endwith %}
-    <main class="container-fluid" style="display:block; margin-top:100px; height: calc(100vh - 100px); overflow-y: auto;">
+    <main class="container-fluid" style="display:block; height: calc(100vh - 100px); overflow-y: auto;">
 
         {% block content %}