updated mobile menu

package.json

@@ -12,8 +12,8 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/node": "^10.0.6",
+    "@astrojs/node": "^10.1.2",
-    "astro": "^6.0.8",
+    "astro": "^6.4.2",
     "mermaid": "^11.14.0",
     "mflx": "^2.0.1"
   }

pnpm-lock.yaml

@@ -11,11 +11,11 @@ importers:
   .:
     dependencies:
       '@astrojs/node':
-        specifier: ^10.0.6
+        specifier: ^10.1.2
-        version: 10.0.6(astro@6.1.6(rollup@4.60.1)(sass@1.99.0))
+        version: 10.1.2(astro@6.4.2(rollup@4.60.1)(sass@1.99.0))
       astro:
-        specifier: ^6.0.8
+        specifier: ^6.4.2
-        version: 6.1.6(rollup@4.60.1)(sass@1.99.0)
+        version: 6.4.2(rollup@4.60.1)(sass@1.99.0)
       mermaid:
         specifier: ^11.14.0
         version: 11.14.0
@@ -28,29 +28,26 @@ packages:
   '@antfu/install-pkg@1.1.0':
     resolution: {integrity: sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==}
 
-  '@astrojs/compiler@3.0.1':
+  '@astrojs/compiler@4.0.0':
-    resolution: {integrity: sha512-z97oYbdebO5aoWzuJ/8q5hLK232+17KcLZ7cJ8BCWk6+qNzVxn/gftC0KzMBUTD8WAaBkPpNSQK6PXLnNrZ0CA==}
+    resolution: {integrity: sha512-eouss7G8ygdZqHuke033VMcVw5HTZUu+PXd/h06DGDUg/jt5btPYPqh66ENWw/mU78rBrf/oeC4oqoBwMtDMNA==}
 
-  '@astrojs/internal-helpers@0.8.0':
+  '@astrojs/internal-helpers@0.10.0':
-    resolution: {integrity: sha512-J56GrhEiV+4dmrGLPNOl2pZjpHXAndWVyiVDYGDuw6MWKpBSEMLdFxHzeM/6sqaknw9M+HFfHZAcvi3OfT3D/w==}
+    resolution: {integrity: sha512-Ry2R3VPeIN4uPCSA4xQc+e+vsJXkalKpEbDc07hV+a/o5Bs2N/s/uDcPJH/05L19DKh9tAy7e6JM3YZ6Cxfezw==}
 
-  '@astrojs/internal-helpers@0.9.0':
+  '@astrojs/markdown-remark@7.2.0':
-    resolution: {integrity: sha512-GdYkzR26re8izmyYlBqf4z2s7zNngmWLFuxw0UKiPNqHraZGS6GKWIwSHgS22RDlu2ePFJ8bzmpBcUszut/SDg==}
+    resolution: {integrity: sha512-+YxmVQu1Bd+MFfSzjq1rOJvD9+nIOJzz5YIIhdIH01RrxRkKbyKoEgyIqP3yv51MhzMDgd79QaPv+kCVPT8vHw==}
 
-  '@astrojs/markdown-remark@7.1.0':
+  '@astrojs/node@10.1.2':
-    resolution: {integrity: sha512-P+HnCsu2js3BoTc8kFmu+E9gOcFeMdPris75g+Zl4sY8+bBRbSQV6xzcBDbZ27eE7yBGEGQoqjpChx+KJYIPYQ==}
+    resolution: {integrity: sha512-6MtNb0iEdZw3m7Dva8V3qo1y9MVoVJKx9dQiNGvy4Ncg5yfaAwGa+9mrDJ3gWCWUtESZi8cvqVshy92sFufg1Q==}
-
-  '@astrojs/node@10.0.6':
-    resolution: {integrity: sha512-e8JmaP4sGxqvdei14kmBzhAqgd5/L5MTExW3Hks5DOt9LDvGzlsFZwnXVXzWPVjW/PErl7t9uLg7xWhCqfkSrA==}
     peerDependencies:
-      astro: ^6.0.0
+      astro: ^6.3.0
 
-  '@astrojs/prism@4.0.1':
+  '@astrojs/prism@4.0.2':
-    resolution: {integrity: sha512-nksZQVjlferuWzhPsBpQ1JE5XuKAf1id1/9Hj4a9KG4+ofrlzxUUwX4YGQF/SuDiuiGKEnzopGOt38F3AnVWsQ==}
+    resolution: {integrity: sha512-KTivpmnz6lDsC6o9H4+DNm2SrE/GHzw8cNAvEJwAvUT+eoaEnn/4NtbDNfRRaxaJHdp15gf+tfHAWiXR4wB3BA==}
     engines: {node: '>=22.12.0'}
 
-  '@astrojs/telemetry@3.3.0':
+  '@astrojs/telemetry@3.3.2':
-    resolution: {integrity: sha512-UFBgfeldP06qu6khs/yY+q1cDAaArM2/7AEIqQ9Cuvf7B1hNLq0xDrZkct+QoIGyjq56y8IaE2I3CTvG99mlhQ==}
+    resolution: {integrity: sha512-j8DNruA8ors99Al39RYZPJK4DC1bKkoNm93mAMuBhY9TCNC4R8n1q7ovFnJ5qhGh5Lsh7pa1gpQVpYpsJPeTHQ==}
     engines: {node: 18.20.8 || ^20.3.0 || >=22.0.0}
 
   '@babel/helper-string-parser@7.27.1':
@@ -813,6 +810,7 @@ packages:
 
   '@ungap/structured-clone@1.3.0':
     resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
+    deprecated: Potential CWE-502 - Update to 1.3.1 or higher
 
   '@upsetjs/venn.js@2.0.0':
     resolution: {integrity: sha512-WbBhLrooyePuQ1VZxrJjtLvTc4NVfpOyKx0sKqioq9bX1C1m7Jgykkn8gLrtwumBioXIqam8DLxp88Adbue6Hw==}
@@ -836,8 +834,8 @@ packages:
   array-iterate@2.0.1:
     resolution: {integrity: sha512-I1jXZMjAgCMmxT4qxXfPXa6SthSoE8h6gkSI9BGGNv8mP8G/v0blc+qFnZu6K42vTOiuME596QaLO0TP3Lk0xg==}
 
-  astro@6.1.6:
+  astro@6.4.2:
-    resolution: {integrity: sha512-pRsz+kYriwCV/AUcY/I9OVKtVHuYFs2DtCszAxprXded/kTE53nMwxfnK0Nf6FPfaX9vcUiLnigcSIhuFoKntA==}
+    resolution: {integrity: sha512-8H89CH2dKL5SCU99OCqdU9BGjmPkSJqaPurywj5XMo7eMFGUFD3vsNhdEKnEh4mK4LgGje3/QDTTSIIGst0G0Q==}
     engines: {node: '>=22.12.0', npm: '>=9.6.5', pnpm: '>=7.1.0'}
     hasBin: true
 
@@ -1147,9 +1145,6 @@ packages:
     resolution: {integrity: sha512-DPi0FmjiSU5EvQV0++GFDOJ9ASQUVFh5kD+OzOnYdi7n3Wpm9hWWGfB/O2blfHcMVTL5WkQXSnRiK9makhrcnw==}
     engines: {node: '>=0.3.1'}
 
-  dlv@1.1.3:
-    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
-
   dom-serializer@2.0.0:
     resolution: {integrity: sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==}
 
@@ -1251,6 +1246,10 @@ packages:
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
 
+  get-tsconfig@5.0.0-beta.4:
+    resolution: {integrity: sha512-7nF7C9fIPFEMHgEMEfgIlO9wDdZ8CyHw27rWciFZfHvHDReIiPhsYuzPRXsfvBCqFy1l8RRyyWV7QLM+ZhUJsQ==}
+    engines: {node: '>=20.20.0'}
+
   github-slugger@2.0.0:
     resolution: {integrity: sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==}
 
@@ -1328,6 +1327,11 @@ packages:
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     hasBin: true
 
+  is-docker@4.0.0:
+    resolution: {integrity: sha512-LHE+wROyG/Y/0ZnbktRCoTix2c1RhgWaZraMZ8o1Q7zCh0VSrICJQO5oqIIISrcSBtrXv0o233w1IYwsWCjTzA==}
+    engines: {node: '>=20'}
+    hasBin: true
+
   is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -1353,6 +1357,9 @@ packages:
     resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
     hasBin: true
 
+  jsonc-parser@3.3.1:
+    resolution: {integrity: sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ==}
+
   katex@0.16.45:
     resolution: {integrity: sha512-pQpZbdBu7wCTmQUh7ufPmLr0pFoObnGUoL/yhtwJDgmmQpbkg/0HSVti25Fu4rmd1oCR6NGWe9vqTWuWv3GcNA==}
     hasBin: true
@@ -1707,6 +1714,9 @@ packages:
   remark-stringify@11.0.0:
     resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==}
 
+  resolve-pkg-maps@1.0.0:
+    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
+
   retext-latin@4.0.0:
     resolution: {integrity: sha512-hv9woG7Fy0M9IlRQloq/N6atV82NxLGveq+3H2WOi79dtIYWN8OaxogDm77f8YnVXJL2VD3bbqowu5E3EMhBYA==}
 
@@ -1826,16 +1836,6 @@ packages:
     resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==}
     engines: {node: '>=6.10'}
 
-  tsconfck@3.1.6:
-    resolution: {integrity: sha512-ks6Vjr/jEw0P1gmOVwutM3B7fWxoWBL2KRDb1JfqGVawBmO5UsvmWOQFGHBPl5yxYz4eERr19E6L7NMv+Fej4w==}
-    engines: {node: ^18 || >=20}
-    hasBin: true
-    peerDependencies:
-      typescript: ^5.0.0
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
@@ -2055,24 +2055,26 @@ snapshots:
       package-manager-detector: 1.6.0
       tinyexec: 1.1.1
 
-  '@astrojs/compiler@3.0.1': {}
+  '@astrojs/compiler@4.0.0': {}
 
-  '@astrojs/internal-helpers@0.8.0':
+  '@astrojs/internal-helpers@0.10.0':
     dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      js-yaml: 4.1.1
       picomatch: 4.0.4
+      retext-smartypants: 6.2.0
+      shiki: 4.0.2
+      smol-toml: 1.6.1
+      unified: 11.0.5
 
-  '@astrojs/internal-helpers@0.9.0':
+  '@astrojs/markdown-remark@7.2.0':
     dependencies:
-      picomatch: 4.0.4
+      '@astrojs/internal-helpers': 0.10.0
-
+      '@astrojs/prism': 4.0.2
-  '@astrojs/markdown-remark@7.1.0':
-    dependencies:
-      '@astrojs/internal-helpers': 0.8.0
-      '@astrojs/prism': 4.0.1
       github-slugger: 2.0.0
       hast-util-from-html: 2.0.3
       hast-util-to-text: 4.0.2
-      js-yaml: 4.1.1
       mdast-util-definitions: 6.0.0
       rehype-raw: 7.0.0
       rehype-stringify: 10.0.1
@@ -2080,9 +2082,6 @@ snapshots:
       remark-parse: 11.0.0
       remark-rehype: 11.1.2
       remark-smartypants: 3.0.2
-      retext-smartypants: 6.2.0
-      shiki: 4.0.2
-      smol-toml: 1.6.1
       unified: 11.0.5
       unist-util-remove-position: 5.0.0
       unist-util-visit: 5.1.0
@@ -2091,30 +2090,26 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@astrojs/node@10.0.6(astro@6.1.6(rollup@4.60.1)(sass@1.99.0))':
+  '@astrojs/node@10.1.2(astro@6.4.2(rollup@4.60.1)(sass@1.99.0))':
     dependencies:
-      '@astrojs/internal-helpers': 0.9.0
+      '@astrojs/internal-helpers': 0.10.0
-      astro: 6.1.6(rollup@4.60.1)(sass@1.99.0)
+      astro: 6.4.2(rollup@4.60.1)(sass@1.99.0)
       send: 1.2.1
       server-destroy: 1.0.1
     transitivePeerDependencies:
       - supports-color
 
-  '@astrojs/prism@4.0.1':
+  '@astrojs/prism@4.0.2':
     dependencies:
       prismjs: 1.30.0
 
-  '@astrojs/telemetry@3.3.0':
+  '@astrojs/telemetry@3.3.2':
     dependencies:
       ci-info: 4.4.0
-      debug: 4.4.3
-      dlv: 1.1.3
       dset: 3.1.4
-      is-docker: 3.0.0
+      is-docker: 4.0.0
       is-wsl: 3.1.1
       which-pm-runs: 1.1.0
-    transitivePeerDependencies:
-      - supports-color
 
   '@babel/helper-string-parser@7.27.1': {}
 
@@ -2706,12 +2701,12 @@ snapshots:
 
   array-iterate@2.0.1: {}
 
-  astro@6.1.6(rollup@4.60.1)(sass@1.99.0):
+  astro@6.4.2(rollup@4.60.1)(sass@1.99.0):
     dependencies:
-      '@astrojs/compiler': 3.0.1
+      '@astrojs/compiler': 4.0.0
-      '@astrojs/internal-helpers': 0.8.0
+      '@astrojs/internal-helpers': 0.10.0
-      '@astrojs/markdown-remark': 7.1.0
+      '@astrojs/markdown-remark': 7.2.0
-      '@astrojs/telemetry': 3.3.0
+      '@astrojs/telemetry': 3.3.2
       '@capsizecss/unpack': 4.0.0
       '@clack/prompts': 1.2.0
       '@oslojs/encoding': 1.1.0
@@ -2729,10 +2724,12 @@ snapshots:
       esbuild: 0.27.7
       flattie: 1.1.1
       fontace: 0.4.1
+      get-tsconfig: 5.0.0-beta.4
       github-slugger: 2.0.0
       html-escaper: 3.0.3
       http-cache-semantics: 4.2.0
       js-yaml: 4.1.1
+      jsonc-parser: 3.3.1
       magic-string: 0.30.21
       magicast: 0.5.2
       mrmime: 2.0.1
@@ -2751,7 +2748,6 @@ snapshots:
       tinyclip: 0.1.12
       tinyexec: 1.1.1
       tinyglobby: 0.2.16
-      tsconfck: 3.1.6
       ultrahtml: 1.6.0
       unifont: 0.7.4
       unist-util-visit: 5.1.0
@@ -2795,7 +2791,6 @@ snapshots:
       - supports-color
       - terser
       - tsx
-      - typescript
       - uploadthing
       - yaml
 
@@ -3107,8 +3102,6 @@ snapshots:
 
   diff@8.0.4: {}
 
-  dlv@1.1.3: {}
-
   dom-serializer@2.0.0:
     dependencies:
       domelementtype: 2.3.0
@@ -3213,6 +3206,10 @@ snapshots:
   fsevents@2.3.3:
     optional: true
 
+  get-tsconfig@5.0.0-beta.4:
+    dependencies:
+      resolve-pkg-maps: 1.0.0
+
   github-slugger@2.0.0: {}
 
   h3@1.15.11:
@@ -3346,6 +3343,8 @@ snapshots:
 
   is-docker@3.0.0: {}
 
+  is-docker@4.0.0: {}
+
   is-extglob@2.1.1:
     optional: true
 
@@ -3368,6 +3367,8 @@ snapshots:
     dependencies:
       argparse: 2.0.1
 
+  jsonc-parser@3.3.1: {}
+
   katex@0.16.45:
     dependencies:
       commander: 8.3.0
@@ -3955,6 +3956,8 @@ snapshots:
       mdast-util-to-markdown: 2.1.2
       unified: 11.0.5
 
+  resolve-pkg-maps@1.0.0: {}
+
   retext-latin@4.0.0:
     dependencies:
       '@types/nlcst': 2.0.3
@@ -4145,8 +4148,6 @@ snapshots:
 
   ts-dedent@2.2.0: {}
 
-  tsconfck@3.1.6: {}
-
   tslib@2.8.1:
     optional: true
 

src/components/Footer.astro

@@ -3,8 +3,9 @@ const platform = "github";
 const username = "withastro";
 
 import Social from './Social.astro';
+import MobileMenu from '../components/MobileMenu.astro';
 ---
-
+<MobileMenu />
 <footer style="background: #ccc;" class="flx center middle">
   <p>Made With love by a Furry Fox Nerd 🦊</p>
 

src/components/Menu.astro

@@ -1,5 +1,7 @@
 ---
 ---
-<button aria-expanded="false" aria-controls="main-menu" class="menu">
+<button aria-expanded="false" aria-controls="main-menu" class="menu flx middle center">
-  Menu
+  <svg viewBox="0 0 24 24" width="35" height="35" fill="currentColor">
+        <path d="M3 18H21V16H3V18ZM3 13H21V11H3V13ZM3 6V8H21V6H3Z"/>
+    </svg>
 </button>

src/components/MobileMenu.astro

@@ -0,0 +1,44 @@
+---
+---
+<style>
+	.mobileMenu {
+		position: fixed;
+		height: 100%;
+		width: 100%;
+		top: 0;
+		left: 0;
+		z-index: 8;
+		background-color: #fffffff0;
+
+	}
+	a {
+		font-size: 1.4rem;
+		font-weight: 600;
+		padding: 1.3rem;
+	}
+	a:visited {
+		color: dimgrey;
+	}
+	a:hover {
+		color: #333;
+	}
+	a:link {
+		color: #efefef;
+	}
+</style>
+<dialog class="mobileMenu">
+	<div class="flx middle right">
+		<button id="closeMobileMenu" class=" flx middle center"> <svg viewBox="0 0 24 24" width="35" height="35" fill="currentColor">
+        <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/>
+    </svg></button>
+	</div>
+	
+	<div class="flx(column,wrap) center middle mobileLinks">
+		<a href="/">Home</a>
+		<a href="/about/">About</a>
+		<a href="/pricing/">Pricing</a>
+		<a href="/blog/">Blog</a>
+	</div>
+	
+	
+</dialog>

src/pages/index.astro

@@ -119,7 +119,7 @@ First, if you have a website, you provide us with your website and domain name,
                 
                 F[Leave website as is] ==> G[$Profit];
                 D ==> G
-                classDef default fill:#222,stroke:#111,stroke-width:4px, color:white, font-weight:bold, font-size:1.5rem,text-shadow: 2px 2px 5px #111; 
+                classDef default fill:#222,stroke:#111,stroke-width:4px, color:white, font-weight:bold, font-size:1.5rem,text-shadow: 2px 2px 5px #111 ; 
         </pre>
       </div>
     </div>
@@ -129,12 +129,12 @@ First, if you have a website, you provide us with your website and domain name,
 vfpmedia@airmail.cc if you have any issues or need help. Expect a timely response within 24 hours and in the case of wanting us to build new features for your 
 store or leave issues related to the node.js store vfpmedia@airmail.cc is a valid place as well.
 
-if you don't have a website, a basic blog, portfolio, ecommerce,website will be provided for you at no cost, we'll work with you if you have a design in mind, and implement it and a free subdomain of your choosing.
+if you don't have a website, a basic blog, portfolio, ecommerce, website will be provided for you at no cost, we'll work with you if you have a design in mind, and implement it and a free subdomain of your choosing.
 (i.e. artistnamehere.vfpmedia.com) </p>
 <figure class="flx(wrap) center middle">
   <img src="https://cataas.com/cat" width="300px">
 </figure>
-<p>at this time we are only working with artists we know in meat space in Kansas. we will set you up with stripe, and you will then
+<p>At this time we are only working with artists we know in meat space in Kansas. we will set you up with stripe, and you will then
 be able to take payments online with your store, as long as you update inventory. (website dashboard and hosting dashboard in the works..)
 so long as you pay use 10 dollars per month your web presence and store will be there. much like shopify or any other hosting service. website customization will be 
 you. we recommend using qwen or gemma AI to help you design elements if possible. should you need our help with design, I can help at 25/hr though since I am one person

src/pages/posts/stop-using-adobe-products.md

@@ -23,7 +23,7 @@ tags: ["astro", "blogging", "learning in public"]
 
 ## Why should i stop using adobe animate as an animator?
 
-1. **Adobe Animate no longer exists*
+1. **Adobe Animate no longer exists**
 
 2. **Photoshop sucks as a tool for animation, and after affects is hardly similar to 2d animation**
 

src/scripts/menu.js

@@ -1,7 +1,20 @@
 const menu = document.querySelector('.menu');
-
+const mobileMenu = document.querySelector('.mobileMenu')
+const close = document.querySelector('#closeMobileMenu');
 menu?.addEventListener('click', () => {
   const isExpanded = menu.getAttribute('aria-expanded') === 'true';
   menu.setAttribute('aria-expanded', `${!isExpanded}`);
+  if (!isExpanded) {
+    console.log('not expanded')
+    mobileMenu.setAttribute('open', 'true');
+  }
+  else {
+    console.log('expanded')
+    mobileMenu.setAttribute('open', 'false');
+  }
+});
+
+close.addEventListener('click', () => {
+  mobileMenu.removeAttribute('open');
 });
 

src/styles/mflx.css

@@ -572,8 +572,9 @@ ul {
 
 /*website specific styles*/
 /* nav styles */
+/*.menu is mobile menu*/
 .menu {
-  background-color: #0d0950;
+  background-color: #222;
   border: none;
   color: #fff;
   font-size: 1.2rem;
@@ -659,6 +660,30 @@ header {
 p {
   font-weight: 401;
 }
+.fading-paragraph {
+  color: #222;
+  font-size: 18px;
+  line-height: 1.5;
+
+  -webkit-mask-image: linear-gradient(
+    to right,
+    transparent,
+    black 15%,
+    black 85%,
+    transparent
+  );
+
+  mask-image: linear-gradient(
+    to right,
+    transparent,
+    black 15%,
+    black 85%,
+    transparent
+  );
+}
+#main-menu {
+  display: none;
+}
 @media screen and (min-width: 636px) {
   .nav-links {
     margin-left: 5em;
@@ -675,4 +700,7 @@ p {
   .menu {
     display: none;
   }
+  #main-menu {
+    display: flex;
+  }
 }