diff --git a/index.html b/index.html
index 872b92e..926c60a 100644
--- a/index.html
+++ b/index.html
@@ -67,7 +67,7 @@ <h2>What not to do?</h2>
     </main>
 
     <footer>
-      <p>© <span data-js="year"></span> — How to survive in the forest 🌳</p>
+      <p>© <span data-js="date"></span> — How to survive in the forest 🌳</p>
     </footer>
   </body>
 </html>
diff --git a/script.js b/script.js
index 76dbe2b..c1b6875 100644
--- a/script.js
+++ b/script.js
@@ -1,3 +1,3 @@
-const yearElement = document.querySelector('[data-js="year"]');
-const year = new Date().getFullYear();
-yearElement.textContent = year;
+const dateElement = document.querySelector('[data-js="date"]');
+const date = new Date().toLocaleDateString("en-US");
+dateElement.textContent = date;
diff --git a/styles.css b/styles.css
index ce3289d..7b1f65c 100644
--- a/styles.css
+++ b/styles.css
@@ -1,4 +1,21 @@
+:root {
+  --font: system-ui;
+  --max-width: 60ch;
+  --body-padding: 2rem;
+
+  --color-text: rgb(0, 0, 0, 0.9);
+  --color-text-light: rgb(0, 0, 0, 0.6);
+}
+
 body {
+  width: min(var(--max-width), 100% - var(--body-padding));
   margin: 0 auto;
-  width: min(100% - 2rem, 60ch);
+  color: var(--color-text);
+  font-family: var(--font);
+}
+
+footer {
+  margin-top: 2rem;
+  color: var(--color-text-light);
+  font-size: 0.8rem;
 }