@@ -1,46 +1,27 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <title>Scoped CSS Variables and JS</title>
-</head>
-<body>
-  <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
-
-  <div class="controls">
-    <label for="spacing">Spacing:</label>
-    <input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
-
-    <label for="blur">Blur:</label>
-    <input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
-
-    <label for="base">Base Color</label>
-    <input type="color" name="base" value="#ffc600">
-  </div>
-
-  <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
 
   <style>
     :root {
-      --base: #ffc600;
-      --spacing: 10px;
+      --base: goldenrod;
       --blur: 10px;
+      --spacing: 10px;
     }
 
     img {
-      padding: var(--spacing);
       background: var(--base);
       filter: blur(var(--blur));
+      padding: var(--spacing);
     }
 
     .hl {
       color: var(--base);
     }
 
-    /*
-      misc styles, nothing to do with CSS variables
-    */
-
     body {
       text-align: center;
     }
@@ -66,19 +47,36 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
       width:100px;
     }
   </style>
+</head>
 
-  <script>
-    const inputs = document.querySelectorAll('.controls input');
+<body>
+  <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
 
-    function handleUpdate() {
-      const suffix = this.dataset.sizing || '';
-      document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
-    }
+  <div class="controls">
+    <label for="spacing">Spacing:</label>
+    <input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
 
-    inputs.forEach(input => input.addEventListener('change', handleUpdate));
-    inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
-  </script>
+    <label for="blur">Blur:</label>
+    <input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
 
+    <label for="base">Base Color</label>
+    <input type="color" name="base" value="#ffc600">
+  </div>
+
+  <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
+
+  <script>
+  const inputs = document.querySelectorAll('.controls input');
+
+  function handleUpdate() {
+    const suffix = this.dataset.sizing || '';
+    document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix)
+  }
+
+  inputs.forEach(input => input.addEventListener('change', handleUpdate));
+  inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
+</script>
 
 </body>
-</html>
+
+</html>
@@ -1,5 +1,5 @@
 # JavaScript30 - 30 Day JavaScript Challenge
-Course created by [Wes Bos](https://github.com/wesbos)
+Course created by [Wes Bos](https://github.com/wesbos)  
 Join the challenge (for free!) here - [JavaScript30](https://javascript30.com/account)
 
 ## About
@@ -21,7 +21,7 @@ The starter files include solutions to most challenges, so this isn't really mea
 
 1. [x] ~~[JavaScript Drum Kit](./exercises/01\ -\ JavaScript\ Drum\ Kit)~~
 2. [x] ~~[JS + CSS Clock](./exercises/02\ -\ JS\ +\ CSS\ Clock/)~~
-3. [ ] CSS Variables
+3. [x] ~~[CSS Variables](./exercises/03\ -\ CSS\ Variables)~~
 4. [ ] Array Cardio, Day 1
 5. [ ] Flex Panel Gallery
 6. [ ] Type Ahead