Fixed issue of button-wall overlapping main content on mobile/smaller screens

css/index.css

@@ -184,7 +184,7 @@ body::before {
     margin-bottom: 10px;
 }
 
-/* ---- 88x31 button wall (always visible) ---- */
+/* ---- 88x31 button wall (always visible on desktop) ---- */
 .button-wall {
   position: fixed;
   bottom: 1rem;
@@ -198,6 +198,13 @@ body::before {
   max-width: min(90vw, 480px);
 }
 
+/* hide on mobile */
+@media (max-width: 768px) {
+  .button-wall {
+    display: none;
+  }
+}
+
 .button-wall a {
   display: block;
   line-height: 0;

index.html

@@ -59,7 +59,7 @@
                 <a href="https://git.gay/Ari" target="_blank"><button class="gitgay-link">Check out my Git.Gay</button></a>
             </div>
         </header>
-        
+
     </main>
         <aside class="button-wall" aria-label="88x31 buttons">
         <img src="/assets/88x31/linux.gif" alt="Linux" loading="lazy">
@@ -73,6 +73,8 @@
         <img src="/assets/88x31/nft.gif" alt="NFT" loading="lazy">
         <img src="/assets/88x31/noweb32.gif" alt="No Web 3.2" loading="lazy">
         <img src="/assets/88x31/meltice.gif" alt="Melt Ice" loading="lazy">
+        <img src="/assets/88x31/transnow2.gif" alt="Melt Ice" loading="lazy">
+
     </aside>
 </body>
 <script src="js/index.js"></script>