diff --git a/astro/public/styles/css/nav-buttons.css b/astro/public/styles/css/nav-buttons.css
index 5db99f5..acdc5ce 100644
--- a/astro/public/styles/css/nav-buttons.css
+++ b/astro/public/styles/css/nav-buttons.css
@@ -1,7 +1,7 @@
 .custom-btn {
     width: 130px;
     height: 40px;
-    color: #4c4f69;
+    color: --text;
     border-radius: 5px;
     padding: 10px 25px;
     font-weight: 500;
@@ -15,15 +15,15 @@
         4px 4px 5px 0px rgba(0, 0, 0, .1);
     outline: none;
     font-size: large;
-    -webkit-box-shadow: 0 0 10px var(--other-accent);
-    -moz-box-shadow: 0 0 10px var(--other-accent);
-    box-shadow: 0 0 10px var(--other-accent);
+    -webkit-box-shadow: 0 0 10px var(--accent);
+    -moz-box-shadow: 0 0 10px var(--accent);
+    box-shadow: 0 0 10px var(--accent);
 }
 
 /* 8 */
 .btn-1 {
-    background-color: var(--overlay);
-    background-image: linear-gradient(315deg, var(--overlay) 0%, var(--accent-color) 74%);
+    background-color: var(--background);
+    background-image: linear-gradient(315deg, var(--text) 0%, var(--accent) 74%);
     line-height: 42px;
     padding: 0;
     border: none;
@@ -42,7 +42,7 @@
     content: "";
     right: 0;
     bottom: 0;
-    background: var(--accent-color);
+    background: var(--accent);
     /*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: var(--accent-color);
+    color: var(--accent);
 }
 
 .btn-1 span:before,
@@ -82,7 +82,7 @@
     content: "";
     left: 0;
     top: 0;
-    background: var(--accent-color);
+    background: var(--accent);
     /*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),