Fixed mobile vs desktop styling

scripts/homepage.js

@@ -1,8 +1,8 @@
-const menu = document.getElementById('menu');
+const navbtn = document.getElementById('nav-btn');
 
-menu.addEventListener('click', () => { 
-  const header = document.getElementById('header');
-  header.classList.toggle('expanded');
-  menu.classList.toggle('expanded');
+navbtn.addEventListener('click', () => { 
+  const navbar = document.getElementById('navbar');
+  navbar.classList.toggle('expanded');
+  navbtn.classList.toggle('expanded');
 });
 

styles/global.css

@@ -207,10 +207,6 @@ em {
         display: none;
     }
 
-    body {
-        font-size: 30px;
-    }
-
     #nav-btn {
         content: "";
         display: block;
@@ -226,6 +222,7 @@ em {
         width: 0.6em;
         padding: 0px;
         transition: transform 0.5s ease;
+        cursor: pointer;
     }
 
     body::before {
@@ -306,7 +303,7 @@ em {
 
     #homepage-text {
         text-align: center;
-        max-width: 550px;
+        max-width: 20em;
     }
 
     #homepage-img {
@@ -322,3 +319,15 @@ em {
         font-size: 3em;
     }
 }
+
+@media (pointer: fine) and (hover: hover) {
+    body {
+        font-size: 16px;
+    }
+}
+
+@media (pointer: coarse) and (hover: none) {
+    body {
+        font-size: 30px;
+    }
+}