3 files changed, 23 insertions, 19 deletions
diff --git a/src/css/ghrepo.css b/src/css/ghrepo.css
index 054896b3..121b7066 100644
--- a/src/css/ghrepo.css
+++ b/src/css/ghrepo.css
@@ -21,8 +21,12 @@
     --light-yellow: rgb(255, 255, 204);
     --pale-yellow: rgb(255, 255, 153);
     --lemon-yellow: rgb(255, 250, 205);
-    }
-/* } */
+    --gold-color: #F4E8C1;
+    --box-shadow: rgba(255, 238, 16,.7);
+    --neon-red: #f83a3a;
+    --neon-pink: #f13dd4;
+    --neon-purple: #7000ff;
+}
 
 * {
     box-sizing: border-box;
@@ -37,12 +41,11 @@ span,p,div,a {
 
 body {
     margin: 0;
-    margin-top: (3em);
     font-family: 'Open Sans', sans-serif;
 }
 
 main {
-    margin-top: 3em
+    margin-top: var(--topBarHeight)
 }
 
 .bgWrap {
@@ -55,14 +58,14 @@ main {
     height: 100%;
     /* background-color: rgb(48, 60, 100); */
     /* background-image: url(/images/heigh-grass.jpg), url(/images/heigh-grass.webp); */
-    background-color: #05010d;
+    background-color: var(--neon-bg-color);
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     align-items: center;
     display: flex;
     justify-content: center;
-    color: #F4E8C1;
+    color: var(--gold-color);
     z-index: -1;
     font-size: 16px;
 }
@@ -178,7 +181,7 @@ ul {
 
 .user-info img:hover {
     transform: scale(1.1);
-    box-shadow: 0 0 100mm rgba(255, 238, 16,.7);
+    box-shadow: 0 0 100mm var(--box-shadow);
 }
 
 .user-info div {
@@ -316,7 +319,7 @@ input:active,
 
 .repo:hover {
     /* box-shadow: 0 3px 6px var(--accent), 0 3px 6px var(--accent); */
-    box-shadow: 0 0 50mm rgba(255, 238, 16,.7);
+    box-shadow: 0 0 50mm var(--box-shadow);
     /* background: rgba(0, 0, 0, 0.1); */
     -webkit-backdrop-filter: blur(125px);
     backdrop-filter: blur(125px);
@@ -389,7 +392,7 @@ input:active,
     -webkit-backdrop-filter: blur(100px);
     backdrop-filter: blur(100px);
     /* box-shadow: 0 0 10mm rgba(0,0,0,.7); */
-    border: 2px solid rgb(255, 255, 255)
+    border: 2px solid #fff
 }
 
 .floattext {
@@ -419,11 +422,11 @@ input:active,
 .btn-code:hover {
     box-shadow: 0 0 50mm linear-gradient(
         45deg,
-        #f83a3a 10%,
-        #f13dd4 50%,
-        #7000ff 90%
+        var(--neon-red) 10%,
+        var(--neon-pink) 50%,
+        var(--neon-purple) 90%
     );
-    border: 2px solid linear-gradient(45deg,#f83a3a 10%,#f13dd4 50%,#7000ff 90%)
+    border: 2px solid linear-gradient(45deg,var(--neon-red) 10%,var(--neon-pink) 50%,var(--neon-purple) 90%)
 }
 
 @media (min-width: 700px) {
diff --git a/src/css/index.css b/src/css/index.css
index 4c41b98d..633ac01a 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -1,6 +1,6 @@
-/* :root { */
-/*   --primary-color: mediumslateblue; */
-/* } */
+:root {
+    --text: #F4E8C1
+}
 .wrapper {
     height: 100vh;
     width: 100%;
@@ -26,11 +26,11 @@
     height: 100%;
     /* background-color: rgb(20, 53, 85);
     background-image: url(/images/backgroundNightCity.jpg) ,url(/images/backgroundNightCity.webp); */
-    background-color: #05010d;
+    background-color: var(--neon-bg-color);
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
-    color: #F4E8C1;
+    color: var(--text);
     z-index: -10;
 }
 
diff --git a/src/css/style.css b/src/css/style.css
index 388e7848..e4d813c2 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,5 +1,6 @@
 :root {
-    --topBarHeight: 10%;
+    --topBarHeight: 3em;
+    --neon-bg-color: #05010d
 }
 
 @font-face {