Use color variables

diff --git a/index.html b/index.html
index 824b83687ec03ed9b8f798ea4a9d1fb6e9bbae43..116a2db7b6a5aa44bc11284468931d95b4306a0c 100644 (file)
--- a/index.html
+++ b/index.html
@@ -7,12 +7,18 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="icon" href="data:,">
   <style>
+    :root {
+      --primary-lightest: hsl(235deg 30% 90%);
+      --secondary: hsl(354deg 50% 50%);
+      --secondary-lighter: hsl(354deg 20% 85%);
+    }
+
     body {
       font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto,
         "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", Helvetica, Arial,
         sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
       color: hsl(235deg 90% 10%);
-      background: hsl(235deg 30% 90%);
+      background: var(--primary-lightest);
     }
 
     header {