uh no idea, i just a bunch probably...

www/css/style.css

@@ -1,10 +1,23 @@
+html, body {
+  inset: 0 0 0 0;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
+
 body {
-  background-color: var(--theme-bg);
+  min-height: 100%;
 }
 
 main {
   visibility: hidden;
   opacity: 0;
+  
+  width: 100%;
+  height: 100%;
+
+  z-index: 0;
 }
 
 #bg-canvas {
@@ -20,7 +33,7 @@ main {
 .centered-container {
   position: absolute;
   inset: 0 0 0 0;
-  margin: auto;
+  margin: auto auto;
 
   display: flex;
 }
@@ -35,8 +48,8 @@ main {
   border: 0.5ch solid var(--theme-tty-border);
   padding: 20px;
 
-  width: auto;
-  height: auto;
+  /* width: auto; */
+  /* height: auto; */
   
   background-color: var(--theme-bg);
   color: var(--theme-text);
@@ -45,6 +58,56 @@ main {
   font-size: 1.5em
 }
 
+#boot-ppty {
+  z-index: 1;
+}
+
+#frames {
+  /* border-box means padding+margin are included in width+height */
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: 5% 10% 0% 5%;
+
+  display: grid;
+  grid-template-areas:
+    "whoami butterfly"
+    "socials butterfly"
+    "disclaimer disclaimer"
+    ;
+  grid-template-columns: 1fr 1fr;
+}
+
+#whoami {
+  grid-area: whoami;
+  
+  width: 100%;
+  height: 100%;
+
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  gap: 2ch;
+}
+
+#whoami .avatar {
+  height: 18ch;
+  display: block;          /* avoid inline-image gaps */
+  object-fit: scale-down;
+}
+
+#socials {
+  grid-area: socials;
+}
+
+#butterfly {
+  grid-area: butterfly;
+}
+
+#disclaimer {
+  grid-area: disclaimer;
+}
+
 .socials-list {
   margin: 0;
   padding: 0;
@@ -71,7 +134,7 @@ main {
 }
 
 .socials-name {
-  flex: 1 1 140px;
+  flex: 1 1 9ch;
   overflow: hidden;
   white-space: nowrap;
   
@@ -89,5 +152,5 @@ main {
   text-decoration: none;
   text-overflow: ellipsis;
 
-  color: var(--theme-link);
+  color: var(--theme-tty-command);
 }