Defined everything proper as variables

1 files changed, 44 insertions, 41 deletions

diff --git a/src/Style/style.css b/src/Style/style.css
index 099b76a..24f6e56 100644
--- a/src/Style/style.css
+++ b/src/Style/style.css
@@ -40,6 +40,7 @@
 	font-weight: normal;
 	font-style: normal;
 }
+
 /* Make canvas sit behind everything */
 canvas {
     position: fixed;
@@ -47,6 +48,7 @@ canvas {
     left: 0;
     z-index: -1;
 }
+
 html, body {
     height: 100%;
     margin: 0;
@@ -57,17 +59,18 @@ html::-webkit-scrollbar,
 body::-webkit-scrollbar {
     display: none;
 }
+
 html {
     -ms-overflow-style: none;  /* IE and Edge */
     scrollbar-width: none;  /* Firefox */
 }
+
 body {
-    background: radial-gradient(ellipse at bottom, #1a0f2e 0%, #090012 60%, #050008 100%);
-    color: #e0d6ff;
+    background: radial-gradient(ellipse at bottom, var(--bg-top) 0%, var(--bg-mid) 60%, var(--bg-bottom) 100%);
+    color: var(--text-primary);
     font-family: "Courier New", monospace;
     margin: 0;
     padding: 0;
-
 }
 
 /* Floating terminal panel */
@@ -79,11 +82,11 @@ body {
     max-width: 800px;
     margin: 80px auto;
     padding: 30px;
-    background: rgba(10, 0, 25, 0.6);
-    border: 1px solid rgba(255, 0, 255, 0.4);
+    background: var(--bg-panel);
+    border: 1px solid rgba(var(--magenta-rgb), 0.4);
     box-shadow:
-        0 0 15px rgba(255, 0, 255, 0.2),
-        0 0 40px rgba(0, 255, 255, 0.1);
+        0 0 15px rgba(var(--magenta-rgb), 0.2),
+        0 0 40px rgba(var(--cyan-rgb), 0.1);
     backdrop-filter: blur(6px);
 }
 
@@ -92,10 +95,10 @@ h1 {
     font-size: 42px;
     text-align: center;
     font-family: 'Argon Glow';
-    color: #ff00ff;
+    color: var(--magenta);
     text-shadow:
-        0 0 5px #ff00ff,
-        0 0 15px rgba(255, 0, 255, 0.6);
+        0 0 5px var(--magenta),
+        0 0 15px rgba(var(--magenta-rgb), 0.6);
 }
 
 /* Subtitle */
@@ -103,15 +106,15 @@ h1 {
     text-align: center;
     font-size: 18px;
     margin-bottom: 40px;
-    color: #c9b6ff;
+    color: var(--text-subtitle);
 }
 
 /* Section headers */
 h2 {
     font-size: 22px;
     margin-top: 30px;
-    color: #00ffff;
-    text-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
+    color: var(--cyan);
+    text-shadow: 0 0 8px rgba(var(--cyan-rgb), 0.6);
 }
 
 /* Terminal-style list */
@@ -122,17 +125,17 @@ ul {
 
 li::before {
     content: "> ";
-    color: #ff00ff;
+    color: var(--magenta);
 }
 
 /* Links */
 a {
-    color: #00ffff;
+    color: var(--cyan);
     text-decoration: none;
 }
 
 a:hover {
-    text-shadow: 0 0 8px #00ffff;
+    text-shadow: 0 0 8px var(--cyan);
 }
 
 /* Exclude h1 links */
@@ -148,15 +151,15 @@ textarea,
 button {
     font-family: 'Hacked', monospace;
     font-size: 16px;
-    background: rgba(10, 0, 25, 0.6);
-    color: #e0d6ff;
-    border: 1px solid #ff00ff;
+    background: var(--bg-panel);
+    color: var(--text-primary);
+    border: 1px solid var(--magenta);
     border-radius: 4px;
     padding: 10px;
     outline: none;
     box-shadow:
-        0 0 5px #ff00ff,
-        0 0 15px rgba(255, 0, 255, 0.2);
+        0 0 5px var(--magenta),
+        0 0 15px rgba(var(--magenta-rgb), 0.2);
     backdrop-filter: blur(4px);
     transition: all 0.2s ease-in-out;
     width: 100%;
@@ -178,29 +181,29 @@ textarea {
 /* Hover/focus effects */
 input[type="text"]:focus,
 textarea:focus {
-    border-color: #00ffff;
+    border-color: var(--cyan);
     box-shadow:
-        0 0 5px #00ffff,
-        0 0 15px rgba(0, 255, 255, 0.2);
+        0 0 5px var(--cyan),
+        0 0 15px rgba(var(--cyan-rgb), 0.2);
 }
 
 /* Button */
 button {
     cursor: pointer;
-    background: #ff00ff;
-    color: #000;
+    background: var(--magenta);
+    color: var(--text-black);
     font-weight: bold;
     border: none;
     box-shadow:
-        0 0 10px #ff00ff,
-        0 0 20px rgba(255, 0, 255, 0.2);
+        0 0 10px var(--magenta),
+        0 0 20px rgba(var(--magenta-rgb), 0.2);
 }
 
 button:hover {
-    background: #ff66ff;
+    background: var(--magenta-hover);
     box-shadow:
-        0 0 15px #ff66ff,
-        0 0 30px rgba(255, 102, 255, 0.3);
+        0 0 15px var(--magenta-hover),
+        0 0 30px rgba(var(--magenta-hover-rgb), 0.3);
 }
 
 /* Footer */
@@ -208,7 +211,7 @@ footer {
     text-align: center;
     margin-top: 60px;
     font-size: 14px;
-    color: #888;
+    color: var(--text-muted);
 }
 
 /* Gallery grid */
@@ -222,13 +225,13 @@ footer {
 .gallery-item {
     aspect-ratio: 1;
     overflow: hidden;
-    border: 1px solid rgba(255, 0, 255, 0.4);
+    border: 1px solid rgba(var(--magenta-rgb), 0.4);
     transition: all 0.2s ease-in-out;
 }
 
 .gallery-item:hover {
-    border-color: #00ffff;
-    box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
+    border-color: var(--cyan);
+    box-shadow: 0 0 15px rgba(var(--cyan-rgb), 0.4);
 }
 
 .gallery-item img {
@@ -245,7 +248,7 @@ footer {
     left: 0;
     width: 100%;
     height: 100%;
-    background: rgba(5, 0, 8, 0.95);
+    background: var(--bg-lightbox);
     z-index: 100;
     align-items: center;
     justify-content: center;
@@ -258,8 +261,8 @@ footer {
 .lightbox-img {
     max-width: 90%;
     max-height: 90%;
-    border: 1px solid rgba(255, 0, 255, 0.4);
-    box-shadow: 0 0 30px rgba(255, 0, 255, 0.3);
+    border: 1px solid rgba(var(--magenta-rgb), 0.4);
+    box-shadow: 0 0 30px rgba(var(--magenta-rgb), 0.3);
 }
 
 .lightbox-close {
@@ -267,12 +270,12 @@ footer {
     top: 20px;
     right: 30px;
     font-size: 40px;
-    color: #ff00ff;
+    color: var(--magenta);
     cursor: pointer;
     transition: all 0.2s ease-in-out;
 }
 
 .lightbox-close:hover {
-    color: #00ffff;
-    text-shadow: 0 0 10px #00ffff;
+    color: var(--cyan);
+    text-shadow: 0 0 10px var(--cyan);
 }