variables

public/css/colors.css

@@ -3,6 +3,12 @@
     --accent-light: 250, 221, 201;
     --accent-dark: 149, 106, 81;
     --accent-gradient: linear-gradient(45deg, rgb(var(--accent)), rgb(var(--accent-light)) 30%, white 60%);
+    
+    --accent-color: #fab387;
+    --other-accent: #f5a97f;
+    --gray: #6e738d;
+    --overlay: #c6d0f5;
+    
     color: white;
 }
 

public/css/instructions.css

@@ -5,9 +5,9 @@
             rgba(var(--accent-dark), 33%));
     padding: 1.5rem;
     border-radius: 8px;
-    -webkit-box-shadow: 0 0 20px #f5a97f;
+    -webkit-box-shadow: 0 0 20px var(--other-accent);
-    -moz-box-shadow: 0 0 20px #f5a97f;
+    -moz-box-shadow: 0 0 20px var(--other-accent);
-    box-shadow: 0 0 20px #f5a97f;
+    box-shadow: 0 0 20px var(--other-accent);
 }
 
 .instructions code {

public/css/limepot.css

@@ -20,8 +20,6 @@
     font-family: system-ui, sans-serif;
     line-height: 1.6;
     margin: auto;
-
-    --accent-color: #fab387;
 }
 
 footer {
@@ -47,5 +45,5 @@ h1 {
 
 hr {
     width: 32%;
-    color: #6e738d;
+    color: var(--gray);
 }

public/css/nav-buttons.css

@@ -15,15 +15,15 @@
         4px 4px 5px 0px rgba(0, 0, 0, .1);
     outline: none;
     font-size: large;
-    -webkit-box-shadow: 0 0 10px #f5a97f;
+    -webkit-box-shadow: 0 0 10px var(--other-accent);
-    -moz-box-shadow: 0 0 10px #f5a97f;
+    -moz-box-shadow: 0 0 10px var(--other-accent);
-    box-shadow: 0 0 10px #f5a97f;
+    box-shadow: 0 0 10px var(--other-accent);
 }
 
 /* 8 */
 .btn-1 {
-    background-color: #c6d0f5;
+    background-color: var(--overlay);
-    background-image: linear-gradient(315deg, #c6d0f5 0%, #fab387 74%);
+    background-image: linear-gradient(315deg, var(--overlay) 0%, var(--accent-color) 74%);
     line-height: 42px;
     padding: 0;
     border: none;
@@ -42,7 +42,7 @@
     content: "";
     right: 0;
     bottom: 0;
-    background: #fab387;
+    background: var(--accent-color);
     /*box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
                 -4px -4px 6px 0 rgba(116, 125, 136, .2), 
       inset -4px -4px 6px 0 rgba(255,255,255,.5),
@@ -73,7 +73,7 @@
 }
 
 .btn-1 span:hover {
-    color: #fab387;
+    color: var(--accent-color);
 }
 
 .btn-1 span:before,
@@ -82,7 +82,7 @@
     content: "";
     left: 0;
     top: 0;
-    background: #fab387;
+    background: var(--accent-color);
     /*box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
                 -4px -4px 6px 0 rgba(116, 125, 136, .2), 
       inset -4px -4px 6px 0 rgba(255,255,255,.5),