more mobile display improvements

app/globals.css

@@ -139,6 +139,10 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 
+nav {
+    font-size: 13px;
+}
+
 ::selection {
   background: rgba(110, 231, 183, 0.25);
   color: var(--fg);
@@ -151,6 +155,19 @@ body {
 
 .expand-on-hover-button {
   transition: all 0.2s ease;
+
+  font-family: var(--mono);
+  font-size: 15;
+  color: var(--fg);
+  border: 1px solid var(--border);
+  background-color: var(--bg);
+  height: 3em;
+  display: block;
+  align-content: center;
+  align-items: center;
+  text-align: center;
+  width: 10em;
+  border-radius: var(--radius-md);
 }
 .expand-on-hover-button:hover {
   scale: 1.05;
@@ -158,13 +175,23 @@ body {
 
 
 @media (max-width: 640px) {
+
   h1 {
     font-size: 32px !important;
   }
+
   .footer {
     flex-direction: column;
     height: 36;
   }
+
+  nav {
+    font-size: 16px;
+  }
+.project-grid {
+  scrollbar-width: 10px;
+}
+  
 }
 
 @keyframes wiggle {
@@ -178,4 +205,6 @@ body {
 
 .wiggle {
   animation: wiggle 0.4s ease-in-out infinite;
-}
+}
+
+

app/project/[slug]/page.tsx

@@ -59,21 +59,7 @@ export default function ProjectPage({
         }}
         
           className="expand-on-hover-button"
-          style={{
-            fontFamily: "var(--mono)",
-            fontSize: 15,
-            color: "var(--fg)",
-            border: "1px solid var(--border)",
-            backgroundColor: "var(--bg)",
-            height: "3em",
-            display: "block",
-            alignContent: "center",
-            alignItems: "center",
-            textAlign: "center",
-            width: "10em",
-            borderRadius: "var(--radius-md)",
-            
-          }} href={"#"}>Back To Top</Link>
+          href={"#"}>Back To Top</Link>
 
           <Link onClick={(e)=>{
           window.scrollTo({
@@ -84,21 +70,7 @@ export default function ProjectPage({
         }}
         
           className="expand-on-hover-button"
-          style={{
-            fontFamily: "var(--mono)",
-            fontSize: 15,
-            color: "var(--fg)",
-            border: "1px solid var(--border)",
-            backgroundColor: "var(--bg)",
-            height: "3em",
-            display: "block",
-            alignContent: "center",
-            alignItems: "center",
-            textAlign: "center",
-            width: "10em",
-            borderRadius: "var(--radius-md)",
-            
-          }} href={"/project"}>More Projects</Link>
+          href={"/project"}>More Projects</Link>
         </div>
     </div>
   );