helpful

static/style.css

@@ -17,7 +17,8 @@ body {
   display: flex;
   flex-direction: column;
   align-items: center;
-  min-height: 100vh;
+  min-height: 100dvh;
+  box-sizing: border-box; /* Ensure padding is included in width/height */
 }
 
 a {
@@ -135,15 +136,19 @@ li a {
   align-items: center;
   text-align: center;
   border: 1px solid #333;
+  /* max-height: 90dvh; Prevent card from exceeding viewport height */
+  overflow-y: auto; /* Scroll if content is too tall */
 }
 
 .card h2 {
   color: var(--secondary-color);
   margin-top: 0;
+  /* margin-bottom: 10px; Reduced margin */
+  /* font-size: 1.2rem; Slightly smaller title */
 }
 
 .card p {
-  margin-bottom: 20px;
+  margin-bottom: 15px; /* Reduced margin */
   color: #aaa;
 }
 
@@ -168,4 +173,52 @@ li a {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  font-family: monospace;
 }
+
+/* Queue Grid */
+.queue-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    justify-content: center;
+    width: 100%;
+}
+
+.queue-grid li {
+    flex: 1 1 300px; /* Grow, shrink, basis */
+    max-width: 400px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}
+
+.queue-grid li a {
+    align-items: center;
+    word-break: break-word;
+}
+
+/* Trail Page */
+.trail-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 80dvh;
+    width: 100%;
+    cursor: pointer;
+    text-align: center;
+}
+
+.trail-count {
+    font-size: 5rem;
+    font-weight: bold;
+    color: var(--secondary-color);
+}
+
+.trail-hint {
+    color: #666;
+    margin-top: 20px;
+}
+