Add JS functions and styling

Author: sorayav

js/main.js

@@ -1 +1,11 @@
 'use strict';
+
+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));

styles/main.css

@@ -1,35 +1,45 @@
 :root {
-  
+  --base: #ffc600;
+  --spacing: 10px;
+  --blur: 10px;
 }
 
 body {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  background: #000000;
+  text-align: center;
+  background: rgb(32, 32, 32);
   color: white;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-family: 'helvetica neue', sans-serif;
   font-weight: 100;
   position: relative;
-  text-align: center;
+  height: 100vh;
   overflow: hidden;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
 .controls {
-  margin-bottom: 50px;
-  background: white;
-  border-radius: 10px;
+  padding: 2rem;
+  background-color: rgba(255, 255, 255, 1);
+  box-shadow: 1px 1px 1px rgb(194, 194, 194);
   color: black;
-  padding: 1rem;
-} 
+  margin-bottom: 50px;
+  border-radius: 5px;
+  font-size: 2rem;
+}
 
 input {
   width: 100px;
 }
 
+img {
+  padding: var(--spacing);
+  background: var(--base);
+  filter: blur(var(--blur));
+}
+
+.hl {
+  color: var(--base);
+}
+
 details {
   font-size: 0.8rem;
   position: absolute;