Changing list to horizontal when screen gets small enough

assets/main.css

@@ -1,4 +1,18 @@
+/* @link https://utopia.fyi/type/calculator?c=320,14,1.067,1240,20,1.125,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
+
 :root {
+  --step--2: clamp(0.7686rem, 0.6924rem + 0.381vi, 0.9877rem);
+  --step--1: clamp(0.8201rem, 0.7188rem + 0.5062vi, 1.1111rem);
+  --step-0: clamp(0.875rem, 0.7446rem + 0.6522vi, 1.25rem);
+  --step-1: clamp(0.9336rem, 0.7692rem + 0.822vi, 1.4063rem);
+  --step-2: clamp(0.9962rem, 0.7924rem + 1.0189vi, 1.582rem);
+  --step-3: clamp(1.0629rem, 0.8136rem + 1.2467vi, 1.7798rem);
+  --step-4: clamp(1.1341rem, 0.8322rem + 1.5098vi, 2.0023rem);
+  --step-5: clamp(1.2101rem, 0.8475rem + 1.8129vi, 2.2525rem);
+  --step-6: clamp(1.2912rem, 0.8589rem + 2.1616vi, 2.5341rem);
+
+  --fluid-288-744: clamp(18rem, 8.087rem + 49.5652cqi, 46.5rem);
+
   --bg_h: #1d2021;
   --bg:   #282828;
   --bg_s: #32302f;
@@ -36,25 +50,25 @@ html {
     font-family: monospace;
     background-color: var(--bg);
     color: var(--fg);
-    font-size: 1.25rem; /* 20px */
-    line-height: 1.75rem; /* 28px */
+    font-size: var(--step-1); /* 20px */
+    line-height: var(--step-2); /* 28px */
     padding: 0.25rem;
 }
 
 h1 {
-    font-size: 2.25rem; /* 36px */
-    line-height: 2.5rem; /* 40px */
+    font-size: var(--step-5); /* 36px */
+    line-height: var(--step-6); /* 40px */
     text-align: center;
 }
 
 h2 {
-    font-size: 1.875rem; /* 30px */
-    line-height: 2.25rem; /* 36px */
+    font-size: var(--step-4); /* 30px */
+    line-height: var(--step-5); /* 36px */
 }
 
 h3 {
-    font-size: 1.5rem; /* 24px */
-    line-height: 2rem; /* 32px */
+    font-size: var(--step-3); /* 24px */
+    line-height: var(--step-4); /* 32px */
 }
 
 a {
@@ -115,12 +129,6 @@ img {
 }
 
 @media (max-width: 1024px) {
-    html {
-        line-height: 1.75rem;
-        font-size: 0.875rem;
-        padding: 0.25rem;
-    }
-
     .container {
         flex-direction: column;
     }
@@ -131,22 +139,11 @@ img {
         position: static;
     }
 
+    .sidebar ul li {
+        display: inline-block;
+    }
+
     .content {
         width: 90%;
     }
-
-    h1 {
-        font-size: 1.5rem; /* 24px */
-        line-height: 2rem; /* 32px */
-    }
-
-    h2 {
-        font-size: 1.25rem; /* 20px */
-        line-height: 1.75rem; /* 28px */
-    }
-
-    h3 {
-        font-size: 1rem; /* 16px */
-        line-height: 1.5rem; /* 24px */
-    }
 }