So it begins..

styles/style.css

@@ -34,10 +34,12 @@ body {
 
 body {
   display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: 5rem 1fr 5rem;
-  grid-column-gap: 0px;
-  grid-row-gap: 0px;
+  grid-template:
+    "header" 10vh
+    "main" 1fr
+    "footer" 10vh
+    / 1fr;
+  gap: 0;
   font-family: 'Iosevka';
 }
 
@@ -50,17 +52,17 @@ footer {
 }
 
 header {
-  grid-area: 1 / 1 / 2 / 2;
+  grid-area: "header";
   border-bottom: 2px solid var(--border);
 }
 
 footer {
-  grid-area: 3 / 1 / 4 / 2;
+  grid-area: "footer";
   border-top: 2px solid var(--border);
 }
 
 #main {
-  grid-area: 2 / 1 / 3 / 2;
+  grid-area: "main";
   padding: 3rem 3rem 3rem 3rem;
   font-size: 1.3rem;
   line-height: 2rem;
@@ -85,7 +87,7 @@ a:focus {
   text-decoration: line-through var(--text);
 }
 
-.logo {
+#logo {
   font-size: 3rem;
   font-weight: bold;
 }
@@ -98,7 +100,7 @@ a:focus {
 
 #mesh {
   position: absolute;
-  bottom: 5rem;
+  bottom: 10vh;
   right: 0;
   user-select: none;
   pointer-events: none;
@@ -121,6 +123,20 @@ screen and (max-width: 1500px) {
   }
 }
 
+.links {
+  display: flex;
+}
+
+@media screen and (max-width: 540px) {
+  #logo {
+    font-size: 2.2rem;
+  }
+
+  .links {
+    display: none;
+  }
+}
+
 #sections-button {
   display: none;
 }
@@ -133,8 +149,8 @@ screen and (max-width: 1500px) {
   border: 2px solid var(--border);
   background-color: var(--bg);
   position: absolute;
-  bottom: calc(5rem - 2px);
-  left: 0;
+  bottom: calc(10vh - 2px);
+  left: calc(0px - 2px);
   align-items: center;
   padding: 2rem 3rem;
   display: none;