Centering content in a column for better readability

global/global.css

@@ -7,4 +7,18 @@ body {
     font-style: normal;
     font-variation-settings: "wdth" 100;
     font-size: 16pt;
+    margin: 0;
+    min-height: 100svh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+#main {
+    width: 40rem;
+    margin: 0.25rem;
+    margin-top: 0;
+    padding: 0.25rem;
+    border-left: solid 2px;
+    border-right: solid 2px;
 }

header/header.css

@@ -10,6 +10,7 @@ header {
     width: calc(100% - 1.5rem);
 
     margin-bottom: 0.25rem;
+    margin-top: 0.5rem;
     padding: 0.5rem;
     border-width: 3px;
     border-style: solid;

index.html

@@ -27,6 +27,6 @@
       </p>
     <![endif]-->
     <header id="hd-box"></header>
-    Look ma, I'm horny!
+    <article id="main">Look ma, I'm horny!</article>
   </body>
 </html>