diff --git a/projects/random/minimal-styling/index.html b/projects/random/minimal-styling/index.html
index 2f45b5d..43e5285 100644
--- a/projects/random/minimal-styling/index.html
+++ b/projects/random/minimal-styling/index.html
@@ -5,42 +5,51 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Minimal Styling riffing off Kevin Powell</title>
-    <link rel="stylesheet" href="style.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@700&family=PT+Sans:wght@400;700&display=swap"
+        rel="stylesheet">
+    <!-- <link rel="stylesheet" href="style.css"> -->
+    <link rel="stylesheet" href="style-new.css">
 </head>
 
 <body>
     <main>
-        <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, ratione?</h1>
-        <img src="./IMG_0030.JPG" alt="">
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ducimus consectetur magni vero eum, autem et
-            in
-            placeat reiciendis doloremque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ducimus
-            consectetur magni vero eum, autem et in placeat reiciendis doloremque.
-        </p>
-        <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
-        <h3>Lorem, ipsum dolor.</h3>
-        <img src="IMG_0468.JPG" alt="">
-        <p></p>
-        <h3>Lorem ipsum dolor sit amet consectetur.</h3>
-        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio pariatur dolores nihil quas. Praesentium
-            maxime
-            accusamus ipsam architecto debitis expedita?</p>
-        <ul>
-            <li><a href="">Lorem ipsum dolor sit amet consectetur adipisicing.</a></li>
-            <li><a href="">Lorem ipsum dolor sit amet consectetur adipisicing.</a></li>
-            <li><a href="">Lorem ipsum dolor sit amet consectetur adipisicing.</a></li>
-        </ul>
-        <fieldset>
-            <form action="">
-                <label for="name">Name<input type="text" name="name" id="" placeholder="Enter your name"></label>
-                <label for="email">Email<input type="email" name="email" id=""
-                        placeholder="Enter your email address"></label>
-                <label for="message">Message
-                    <textarea id="message" name="message" rows="4" cols="50" placeholder="Your message here"></textarea>
-                </label>
-            </form>
-        </fieldset>
-        <img src="./IMG_0835.JPG" alt="">
+        <article class="wrapper flow">
+            <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, ratione?</h1>
+            <img src="./IMG_0030.JPG" alt="">
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ducimus consectetur magni vero eum, autem
+                et
+                in
+                placeat reiciendis doloremque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ducimus
+                consectetur magni vero eum, autem et in placeat reiciendis doloremque.
+            </p>
+            <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
+            <h3>Lorem, ipsum dolor.</h3>
+            <img src="IMG_0468.JPG" alt="">
+            <p></p>
+            <h3>Lorem ipsum dolor sit amet consectetur.</h3>
+            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Odio pariatur dolores nihil quas. Praesentium
+                maxime
+                accusamus ipsam architecto debitis expedita?</p>
+            <ul>
+                <li><a href="">Lorem ipsum dolor sit amet consectetur adipisicing.</a></li>
+                <li><a href="">Lorem ipsum dolor sit amet consectetur adipisicing.</a></li>
+                <li><a href="">Lorem ipsum dolor sit amet consectetur adipisicing.</a></li>
+            </ul>
+            <fieldset>
+                <form action="">
+                    <label for="name">Name<input type="text" name="name" id="" placeholder="Enter your name"></label>
+                    <label for="email">Email<input type="email" name="email" id=""
+                            placeholder="Enter your email address"></label>
+                    <label for="message">Message
+                        <textarea id="message" name="message" rows="4" cols="50"
+                            placeholder="Your message here"></textarea>
+                    </label>
+                </form>
+            </fieldset>
+            <img src="./IMG_0835.JPG" alt="">
+        </article>
     </main>
 
 </body>
diff --git a/projects/random/minimal-styling/style-new.css b/projects/random/minimal-styling/style-new.css
new file mode 100644
index 0000000..5d2a742
--- /dev/null
+++ b/projects/random/minimal-styling/style-new.css
@@ -0,0 +1,103 @@
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+* {
+    margin: 0;
+}
+
+:root {
+    --clr-text: hsl(205, 96%, 9%);
+    --clr-body: hsl(205, 96%, 15%);
+    --clr-background: hsl(203, 94%, 94%);
+    --clr-primary: hsl(205, 94%, 28%);
+    --clr-secondary: hsl(320, 94%, 68%);
+    --clr-accent: hsl(2, 94%, 47%);
+
+    --ff-headings: "Nunito", sans-serif;
+    --ff-body: "PT Sans", sans-serif;
+
+    --fs-300: clamp(1.125rem, 1.0815rem + 0.2174vi, 1.25rem);
+    --fs-400: clamp(1.35rem, 1.2048rem + 0.7261vi, 1.7675rem);
+    --fs-500: clamp(1.62rem, 1.3142rem + 1.5291vi, 2.4992rem);
+    --fs-600: clamp(1.944rem, 1.391rem + 2.7651vi, 3.5339rem);
+    --fs-700: clamp(2.3328rem, 1.4061rem + 4.6334vi, 4.997rem);
+    --fs-800: clamp(2.7994rem, 1.3154rem + 7.4198vi, 7.0657rem);
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --clr-text: hsl(205, 96%, 91%);
+        --clr-body: hsl(205, 61%, 93%);
+        --clr-background: hsl(203, 94%, 6%);
+        --clr-primary: hsl(205, 94%, 72%);
+        --clr-secondary: hsl(320, 94%, 32%);
+        --clr-accent: hsl(2, 94%, 53%);
+    }
+}
+
+html {
+    color-scheme: light dark;
+}
+
+:where(img, svg, video) {
+    width: 100%;
+    display: block;
+}
+
+.flow > * + * {
+    margin-block-start: var(--flow-space, 1em);
+}
+
+body {
+    font-family: var(--ff-body);
+    color: var(--clr-body);
+    font-size: var(--fs-400);
+    line-height: 1.2;
+}
+
+h1,
+h2,
+h3 {
+    font-family: var(--ff-headings);
+    line-height: 1.1;
+    text-wrap: balance;
+}
+
+h1 {
+    font-size: var(--fs-700);
+    color: var(--clr-primary);
+    --flow-space: 2em;
+}
+
+h2 {
+    font-size: var(--fs-600);
+    color: var(--clr-primary);
+    --flow-space: 1.5em;
+}
+
+h3 {
+    font-size: var(--fs-500);
+    color: var(--clr-text);
+    --flow-space: 0.5em;
+}
+
+a {
+    color: var(--clr-primary);
+}
+
+a:hover,
+a:focus {
+    color: var(--clr-accent);
+}
+
+::marker {
+    color: var(--clr-secondary);
+}
+
+.wrapper {
+    width: min(100% - 3rem, 55ch);
+    margin-inline: auto;
+}
