diff --git a/index.html b/index.html
index 31fd3b6..883d285 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,7 @@
   <body>
     <div class="page">
       <main>
-        <div class="group">
+        <div class="link-group">
           <h2>Organization</h2>
           <ul>
             <li>
@@ -49,7 +49,7 @@
             </li>
           </ul>
         </div>
-        <div class="group">
+        <div class="link-group">
           <h2>Entertainment</h2>
           <ul>
             <li>
@@ -74,7 +74,7 @@
             </li>
           </ul>
         </div>
-        <div class="group">
+        <div class="link-group">
           <h2>Social</h2>
           <ul>
             <li>
@@ -91,7 +91,7 @@
             </li>
           </ul>
         </div>
-        <div class="group">
+        <div class="link-group">
           <h2>Programming</h2>
           <ul>
             <li>
@@ -108,7 +108,7 @@
             </li>
           </ul>
         </div>
-        <div class="group">
+        <div class="link-group">
           <h2>Hosting</h2>
           <ul>
             <li>
@@ -123,7 +123,7 @@
             </li>
           </ul>
         </div>
-        <div class="group">
+        <div class="link-group">
           <h2>Gaming</h2>
           <ul>
             <li>
@@ -133,7 +133,7 @@
             </li>
           </ul>
         </div>
-        <div class="group">
+        <div class="link-group">
           <h2>Guild Wars 2</h2>
           <ul>
             <li>
diff --git a/styles.css b/styles.css
index 7652adf..3bcf76a 100644
--- a/styles.css
+++ b/styles.css
@@ -23,13 +23,16 @@
   --color13: #ec7aca;
   --color14: #4ab0b9;
   --color15: #a4a0ac;
+  
+  --link-group-title-font-size: 1.5rem;
+  --link-group-item-font-size: 1.25rem;
 }
 
 :root {
   --spacing: 8px;
   --width: 900px;
   --font-family: "Iosevka", monospace;
-  font-size: 200%;
+  font-size: 100%;
 }
 
 * {
@@ -59,11 +62,6 @@ input {
   padding: var(--spacing);
 }
 
-.group {
-  width: 100%;
-  margin-bottom: calc(2 * var(--spacing));
-}
-
 header {
   margin-bottom: calc(2 * var(--spacing));
 }
@@ -73,25 +71,34 @@ main {
   flex-wrap: wrap;
 }
 
-ul {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  display: flex;
-  margin-left: var(--spacing);
-  flex-wrap: wrap;
-  gap: var(--spacing);
+.link-group {
+  width: 100%;
+  margin-bottom: calc(2 * var(--spacing));
+  
+  h2 {
+    margin-bottom: calc(0.5 * var(--spacing));
+    font-size: var(--link-group-title-font-size);
+  }
+  
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: grid;
+    grid-template-columns: repeat( auto-fill, minmax(150px, 1fr) );
+    flex-wrap: wrap;
+    gap: var(--spacing);
+    
+    a {
+      font-size: var(--link-group-item-font-size);
+    }
+  }
 }
 
-li:not(:last-child):after {
-  content: "/";
-  margin-left: -5px;
-}
 
-h2 {
-  margin-bottom: calc(0.5 * var(--spacing));
-  font-size: 1rem;
-}
+
+
+
 
 a {
   color: inherit;
@@ -101,3 +108,10 @@ a {
 a:hover {
   text-decoration: underline;
 }
+
+
+@media screen and (max-width: 800px) {
+  ul {
+    margin-left: 0;
+  }
+}
\ No newline at end of file
