Added a menu for smaller screens (still not finished tho). Also, more

fixes.

styles/style.css

@@ -59,13 +59,13 @@ footer {
   border-top: 2px solid var(--border);
 }
 
-.main {
+#main {
   grid-area: 2 / 1 / 3 / 2;
   padding: 3rem 3rem 3rem 3rem;
   font-size: 1.3rem;
   line-height: 2rem;
   max-width: 120ch;
-  overflow-y: auto;
+  overflow: auto;
 }
 
 a,
@@ -74,8 +74,7 @@ a:visited {
   color: var(--text);
 }
 
-.main a {
-  /* link offset */
+#main a {
   position: relative;
   top: 0.2rem;
 }
@@ -92,8 +91,9 @@ a:focus {
 }
 
 .account,
-.sections {
-  font-size: 2rem
+.sections,
+#sections-menu {
+  font-size: 2rem;
 }
 
 #mesh {
@@ -104,6 +104,44 @@ a:focus {
   pointer-events: none;
 }
 
+@media screen and (max-height: 860px),
+screen and (max-width: 1500px) {
+  #mesh {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 1160px) {
+  .sections {
+    display: none;
+  }
+
+  #sections-button {
+    display: block !important;
+  }
+}
+
+#sections-button {
+  display: none;
+}
+
+#sections-menu a {
+  margin-bottom: 1rem;
+}
+
+#sections-menu {
+  border: 2px solid var(--border);
+  background-color: var(--bg);
+  position: absolute;
+  bottom: calc(5rem - 2px);
+  left: 0;
+  align-items: center;
+  padding: 2rem 3rem;
+  display: none;
+}
+
+
+
 .copyleft a,
 .sections a {
   margin: 0 1rem 0 0;
@@ -126,5 +164,5 @@ button {
   border: none;
   background: var(--bg);
   color: var(--text);
-  margin: 0 4rem 0 0;
+  margin: 0 2rem 0 0;
 }