From 56cb8af74cc22f50fe7a7e2e06c18591aeabc098 Mon Sep 17 00:00:00 2001
From: Lncvrt <lncvrtreal@gmail.com>
Date: Fri, 30 Jan 2026 19:25:11 -0700
Subject: [PATCH] Change colors

---
 src/app/components/AccountButton.tsx |  2 +-
 src/app/components/DiscordButton.tsx |  2 +-
 src/app/components/HomeButton.tsx    |  2 +-
 src/app/globals.css                  | 29 +++++++++++++++++++---------
 4 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/app/components/AccountButton.tsx b/src/app/components/AccountButton.tsx
index 3e511ef..3634305 100644
--- a/src/app/components/AccountButton.tsx
+++ b/src/app/components/AccountButton.tsx
@@ -6,7 +6,7 @@ export function AccountButton () {
   return (
     <>
       <div className='relative'>
-        <Link href='/account' className='home-button absolute -top-4 -left-4'>
+        <Link href='/account' className='top-button absolute -top-4 -left-4'>
           <FontAwesomeIcon icon={faUser} />
         </Link>
       </div>
diff --git a/src/app/components/DiscordButton.tsx b/src/app/components/DiscordButton.tsx
index 40a4a7c..6e5e1d9 100644
--- a/src/app/components/DiscordButton.tsx
+++ b/src/app/components/DiscordButton.tsx
@@ -6,7 +6,7 @@ export function DiscordButton () {
   return (
     <>
       <div className='relative'>
-        <Link href='/discord' className='home-button absolute -top-4 -right-4'>
+        <Link href='/discord' className='top-button absolute -top-4 -right-4'>
           <FontAwesomeIcon icon={faDiscord} />
         </Link>
       </div>
diff --git a/src/app/components/HomeButton.tsx b/src/app/components/HomeButton.tsx
index 255aaa0..4deef52 100644
--- a/src/app/components/HomeButton.tsx
+++ b/src/app/components/HomeButton.tsx
@@ -6,7 +6,7 @@ export function HomeButton () {
   return (
     <>
       <div className='relative'>
-        <Link href='/' className='home-button absolute -top-4 -left-4'>
+        <Link href='/' className='top-button absolute -top-4 -left-4'>
           <FontAwesomeIcon icon={faHome} />
         </Link>
       </div>
diff --git a/src/app/globals.css b/src/app/globals.css
index 05f057b..2ddc6c2 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -2,14 +2,24 @@
 
 * {
   @apply outline-0;
+
+  --col0: rgb(8, 8, 32);
+  --col1: rgb(16, 16, 40);
+  --col2: rgb(32, 32, 56);
+  --col3: rgb(48, 48, 72);
+  --col4: rgb(64, 64, 88);
+  --col5: rgb(80, 80, 104);
+  --col6: rgb(96, 96, 120);
+  --col7: rgb(112, 112, 136);
+  --col8: rgb(128, 128, 152);
 }
 
 body {
-  @apply bg-[rgb(24,24,48)] text-[rgb(200,200,250)] select-none flex items-center justify-center min-h-screen;
+  @apply bg-(--col0) text-[rgb(200,200,250)] select-none flex items-center justify-center min-h-screen;
 }
 
 .box {
-  @apply bg-[rgb(48,48,72)] border border-[rgb(72,72,96)] rounded-lg shadow-[rgba(0,0,0,0.5)];
+  @apply bg-(--col2) border border-(--col4) rounded-lg shadow-[rgba(0,0,0,0.5)];
   @apply w-auto p-6 m-2;
 }
 
@@ -18,8 +28,8 @@ body {
 }
 
 .games-grid a {
-  @apply flex flex-col items-center justify-center px-5 py-2.5 m-1 bg-[rgb(64,64,88)] border border-[rgb(88,88,112)] rounded-lg transition-all duration-200;
-  @apply hover:bg-[rgb(88,88,112)] hover:border-[rgb(112,112,136)] hover:-translate-y-0.5 min-w-30 w-auto h-32 shadow shadow-[rgba(0,0,0,0.5)];
+  @apply flex flex-col items-center justify-center px-5 py-2.5 m-1 bg-(--col4) border border-(--col6) rounded-lg transition-all duration-200;
+  @apply hover:bg-(--col5) hover:border-(--col7) hover:-translate-y-0.5 min-w-30 w-auto h-32 shadow shadow-[rgba(0,0,0,0.5)];
 }
 
 .games-grid a img {
@@ -49,15 +59,16 @@ body {
 
 .downloads a,
 button,
+.button,
 select {
-  @apply bg-[rgb(72,72,96)] hover:bg-[rgb(96,96,120)] border border-[rgb(96,96,120)] hover:border-[rgb(120,120,144)] hover:-translate-y-0.5 rounded-lg px-4 py-2 inline-block transition-all duration-200 cursor-pointer;
+  @apply bg-(--col4) hover:bg-(--col5) border border-(--col6) hover:border-(--col8) hover:-translate-y-0.5 rounded-lg px-4 py-2 inline-block transition-all duration-200 cursor-pointer;
 }
 
-.home-button {
-  @apply bg-[rgb(72,72,96)] hover:bg-[rgb(96,96,120)] border border-[rgb(96,96,120)] hover:border-[rgb(120,120,144)] hover:-translate-y-px rounded-full transition-all h-10 w-10 flex items-center justify-center;
+.top-button {
+  @apply bg-(--col4) hover:bg-(--col5) border border-(--col6) hover:border-(--col7) hover:-translate-y-px rounded-full transition-all h-10 w-10 flex items-center justify-center;
 }
 
-.home-button svg {
+.top-button svg {
   @apply h-5 w-5;
 }
 
@@ -66,5 +77,5 @@ p a {
 }
 
 input {
-  @apply bg-[rgb(72,72,96)] focus:bg-[rgb(96,96,120)] border border-[rgb(96,96,120)] focus:border-[rgb(120,120,144)] rounded-lg px-4 py-2 inline-block transition-all duration-200 cursor-pointer focus:cursor-text;
+  @apply bg-(--col4) focus:bg-(--col5) border border-(--col6) focus:border-(--col7) rounded-lg px-4 py-2 inline-block transition-all duration-200 cursor-pointer focus:cursor-text;
 }