added 1496px max-width, but home screen is too large now imo. Need to fix more font sizes indepently.

src/lib/components/ComponentIndex/CardList.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <style>
-  h1 {
+  h2 {
     font-family: Overpass;
     font-style: normal;
     font-weight: 600;
@@ -38,7 +38,7 @@
 </style>
 
 <div class="list">
-  <h1 id="category-{escape(title)}">{title} <a href="#category-{escape(title)}">#</a></h1>
+  <h2 id="category-{escape(title)}">{title} <a href="#category-{escape(title)}">#</a></h2>
   <div class="grid">
     <slot />
   </div>

src/lib/styles/root.css

@@ -38,7 +38,7 @@
 	--header-text-color: var(--white);
 
 	/* *******MAX WIDTH OF CONTENT******* */
-	--max-width: 1024px;
+	--max-width: 1496px;
 
 	/************FONTS***************/
 	--font-heading: 'Overpass', sans-serif;
@@ -56,21 +56,15 @@
 
 	/* ************SPACING AND SIZES************ */
 	--s-0: 0px;
-	--s-05: 0.125rem;
 	--s-1: 0.25rem;
-	--s-15: 0.375rem;
 	--s-2: 0.5rem;
-	--s-25: 0.625rem;
 	--s-3: 0.75rem;
-	--s-35: 0.875rem;
 	--s-4: 1rem;
 	--s-5: 1.25rem;
 	--s-6: 1.5rem;
 	--s-7: 1.75rem;
 	--s-8: 2rem;
-	--s-9: 2.25rem;
 	--s-10: 2.5rem;
-	--s-11: 2.75rem;
 	--s-12: 3rem;
 	--s-14: 3.5rem;
 	--s-16: 4rem;

src/routes/components/index.svelte

@@ -45,6 +45,7 @@
   }
 
   .controls {
+    font-size: 1rem;
     display: flex;
     justify-content: space-between;
     align-items: center;