Website: switch to full-screen retro layout

website/assets/style.css

@@ -13,6 +13,7 @@
 
 body {
   margin: 0;
+  min-height: 100svh;
   font-family: "Courier New", Courier, monospace;
   background: radial-gradient(circle at top, #2a1b12 0%, var(--bg) 45%, #0d0b0a 100%);
   color: var(--text);
@@ -24,12 +25,19 @@ body {
   inset: 0;
   pointer-events: none;
   opacity: 0.08;
+  z-index: 0;
   background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0, rgba(255, 255, 255, 0.08) 1px, transparent 1px, transparent 2px);
 }
 
 .hero {
+  position: relative;
+  z-index: 1;
+  min-height: 100svh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   text-align: center;
-  padding: 3rem 1rem 2rem;
+  padding: 3rem 1rem;
   border-bottom: 2px solid var(--line);
   box-shadow: 0 0 30px rgba(255, 143, 63, 0.2);
 }
@@ -60,15 +68,27 @@ body {
 }
 
 main {
-  width: min(1000px, 92%);
-  margin: 1.5rem auto 3rem;
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  margin: 0;
+  padding: 0 0 3rem;
 }
 
 section {
-  margin: 1.2rem 0;
+  margin: 0;
   background: var(--panel);
-  border: 1px solid var(--line);
-  padding: 1rem;
+  border-top: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+  border-left: 0;
+  border-right: 0;
+  padding: 1.1rem clamp(1rem, 3vw, 2.5rem);
+}
+
+section > * {
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 h2 {
@@ -112,7 +132,19 @@ a {
 }
 
 footer {
+  position: relative;
+  z-index: 1;
   text-align: center;
-  padding: 1rem;
+  padding: 1rem clamp(1rem, 3vw, 2.5rem);
   border-top: 1px solid var(--line);
 }
+
+@media (max-width: 700px) {
+  .hero {
+    min-height: 90svh;
+  }
+
+  .hero-actions a {
+    margin: 0.3rem;
+  }
+}