Fixing OpenClaw's CSS formatting

style.css

@@ -1,18 +1,23 @@
 body {
   background: #0d0a14;
-  padding: 40px 20px;
+  padding: 20px 20px 100px 20px;
   font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
   color: #9d9aa4;
+  position: relative;
+  height: 100vh;
+  overflow-y: auto;
+  box-sizing: border-box;
 }
 
 .bard {
-  margin: 0 auto 40px;
+  margin: 0 auto 30px;
   /* Remove fixed width in pixels */
   width: 100%;
   max-width: 65em; /* Keep the same max size for desktop */
   height: auto;
   aspect-ratio: 1 / 0.95; /* Maintains the proportion of the artwork */
   font-size: 2px;
+  flex-shrink: 0;
 }
 
 /* Adjust media queries for better scaling */
@@ -148,7 +153,7 @@ body {
   }
 }
 p {
-  margin: 20px auto 0;
+  margin: 10px auto 0;
   position: relative;
   max-width: 400px;
   text-align: center;
@@ -157,21 +162,18 @@ p {
 }
 
 .announcement {
-  margin: 30px auto 0;
-  padding: 20px;
-  max-width: 500px;
-  background: #ffeb3b;
-  border: 3px solid #fbc02d;
-  border-radius: 8px;
+  margin: 10px auto 0;
+  position: relative;
+  max-width: 400px;
   text-align: center;
-  box-shadow: 0 4px 12px rgba(255, 235, 59, 0.3);
+  line-height: 1.3;
+  font-size: 0.875rem;
 }
 
 .announcement a {
-  color: #000;
+  color: #ffeb3b;
   font-weight: bold;
   text-decoration: none;
-  font-size: 1rem;
 }
 
 .announcement a:hover,
@@ -180,16 +182,29 @@ p {
   opacity: 0.85;
 }
 
-.links-bottom {
-  margin: 60px auto 0;
+.debug {
+  margin: 40px auto 0;
   position: relative;
-  max-width: 400px;
+  max-width: 800px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 100%;
+}
+
+.links-bottom {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 20px;
   text-align: center;
-  padding-bottom: 20px;
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
   justify-content: center;
+  background: linear-gradient(to top, rgba(13, 10, 20, 0.95), rgba(13, 10, 20, 0.8));
+  backdrop-filter: blur(4px);
 }
 
 .links-bottom a {
@@ -249,3 +264,51 @@ a:focus-visible {
 .column + .column {
   color: #aa95bd;
 }
+
+/* Make body use flexbox to push nav to bottom */
+body {
+  background: #0d0a14;
+  padding: 40px 20px;
+  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
+  color: #9d9aa4;
+  min-height: 100vh;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  overflow: hidden; /* Prevents scrollbar */
+}
+
+/* Color the announcement link yellow */
+.announcement {
+  margin: 20px auto 0;
+}
+
+.announcement a {
+  color: #ffff00;
+  font-weight: bold;
+  text-decoration: none;
+}
+
+.announcement a:hover {
+  text-decoration: underline;
+}
+
+/* Push the navigation to the bottom using flexbox spacer */
+.bottom-nav {
+  margin-top: auto;
+  width: 100%;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+}
+
+.bottom-nav p {
+  margin: 0;
+  text-align: center;
+}
+
+.bottom-nav a {
+  margin: 0 10px;
+  display: inline-block;
+}