diff --git a/website/static/css/styles.css b/website/static/css/styles.css
index 611cb45..5dc881e 100644
--- a/website/static/css/styles.css
+++ b/website/static/css/styles.css
@@ -37,7 +37,7 @@ a {
 .page {
   max-width: 980px;
   margin: 0 auto;
-  padding: 20px 20px 42px;
+  padding: 20px;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
@@ -71,8 +71,8 @@ a {
   padding: 32px 0 46px;
   max-width: 760px;
   margin: 0 auto;
-  flex: 0 0 auto;
-  min-height: clamp(390px, 50vh, 560px);
+  flex: 1 1 auto;
+  min-height: 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -297,7 +297,7 @@ a {
 
 .footer {
   margin-top: auto;
-  padding-top: 46px;
+  padding-top: 28px;
   color: var(--muted);
   font-size: 13px;
   display: flex;
@@ -345,10 +345,7 @@ a {
 
 @media (max-width: 860px) {
   .hero {
-    padding-top: 40px;
-    min-height: 0;
-    flex: 0 0 auto;
-    justify-content: flex-start;
+    padding: 24px 0 28px;
   }
 
   .window-body {
@@ -365,16 +362,20 @@ a {
   }
 
   .footer {
-    flex-direction: column;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    gap: 8px;
+    font-size: 12px;
+    overflow-x: auto;
+    overflow-y: hidden;
   }
 
-  .hero h1 {
-    white-space: normal;
+  .footer > * {
+    white-space: nowrap;
   }
-}
 
-@media (min-width: 861px) {
-  .hero {
-    transform: translateY(52px);
+  .hero h1 {
+    white-space: normal;
   }
 }