diff --git a/assets/css/style.css b/assets/css/style.css
index 71ca8fc..e10f1fb 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -13,7 +13,7 @@ body {
     flex-direction: column;
     align-items: center;
     text-align: center;
-    background-color: #1e1e2e;
+    background-color: var(--base);
     min-height: 100vh;
     overflow-x: hidden;
 }
@@ -35,7 +35,7 @@ strong {
     width: 150px;
     height: 150px;
     border-radius: 50%;
-    border: 3px solid #b4befe;
+    border: 3px solid var(--lavender);
 }
 
 .name {
@@ -47,26 +47,26 @@ strong {
 .weather {
     font-size: 18px;
     margin-bottom: 10px;
-    color: #bac2de;
+    color: var(--subtext1);
 }
 
 .age {
     font-size: 18px;
     margin-top: 5px;
-    color: #bac2de;
+    color: var(--subtext1);
 }
 
 .hobbies {
     margin-top: 10px;
     font-size: 16px;
-    color: #bac2de;
+    color: var(--subtext1);
 	display: block;
 }
 
 .cards {
     margin-top: 30px !important;
-    background-color: #313244;
-    border: 2px solid #45475a;
+    background-color: var(--surface0);
+    border: 2px solid var(--surface1);
     padding: 20px;
     border-radius: 10px;
     width: 600px !important;
@@ -76,7 +76,7 @@ strong {
 }
 
 .cards:hover {
-    border: 2px solid #585b70;
+    border: 2px solid var(--surface2);
 }
 
 footer {
@@ -86,7 +86,7 @@ footer {
 #status {
     font-weight: bold;
     margin: 10px 0 15px 10px;
-    color: #bac2de;
+    color: var(--subtext1);
 }
 
 .activity {
@@ -101,7 +101,7 @@ footer {
 #activity-name {
     flex-grow: 1;
     text-align: left;
-    color: #bac2de;
+    color: var(--subtext1);
 }
 
 #activity-image {
@@ -119,7 +119,7 @@ footer {
 
 .language-item {
     display: block;
-    background-color: #313244;
+    background-color: var(--surface0);
     padding: 10px 15px;
     border-radius: 8px;
     transition: background-color 0.3s, transform 0.2s;
@@ -128,13 +128,13 @@ footer {
 }
 
 .language-item:hover {
-    background-color: #45475a;
+    background-color: var(--surface1);
     transform: translateY(-5px);
 }
 
 .language-item:hover span,
 .language-item:hover .language-name {
-    color: #f5e0dc;
+    color: var(--rosewater);
 }
 
 .name-percent-container {
@@ -153,14 +153,14 @@ div[class="name-percent-container"] > img.image {
 .language-item .language-name {
     cursor: default;
     font-size: 18px;
-    color: #a6adc8;
+    color: var(--subtext0);
     display: inline-block;
     margin-right: 10px;
 }
 
 .language-item .percent {
     font-size: 16px;
-    color: #a6adc8;
+    color: var(--subtext0);
     font-weight: bold;
 }
 
@@ -168,7 +168,7 @@ div[class="name-percent-container"] > img.image {
     display: block;
     width: 100%;
     height: 8px;
-    background-color: #585b70;
+    background-color: var(--surface2);
     margin-top: 10px;
     border-radius: 5px;
     position: relative;
@@ -179,13 +179,13 @@ div[class="name-percent-container"] > img.image {
     width: 100%;
     height: 100%;
     border-radius: 5px;
-    background: linear-gradient(to right, #b4befe 0%, #cba6f7 50%, #b4befe 100%);
+    background: linear-gradient(to right, var(--lavender) 0%, var(--mauve) 50%, var(--lavender) 100%);
     background-size: 200% 100%;
     animation: shimmer 2s infinite ease-in;
 }
 
 .language-item:hover .percentage-bar .bar-after {
-    background: linear-gradient(to right, var(--text) 0%, #b4befe 50%, var(--text) 100%);
+    background: linear-gradient(to right, var(--text) 0%, var(--lavender) 50%, var(--text) 100%);
     animation: shimmer 2s infinite ease-in;
     background-size: 200% 100%;
 }
@@ -204,8 +204,8 @@ a[class^="software-item tooltip"]::after {
     left: 50%;
     transform: translateX(-50%);
     bottom: 125%;
-    background-color: #1e1e2e;
-    border: 1px solid #6c7086;
+    background-color: var(--base);
+    border: 1px solid var(--overlay0);
     color: var(--text);
     padding: 5px 10px;
     border-radius: 5px;
@@ -272,7 +272,7 @@ a[class^="software-item tooltip"]::after {
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: #313244;
+    background-color: var(--surface0);
     padding: 15px;
     border-radius: 8px;
     transition: background-color 0.3s, transform 0.2s;
@@ -288,13 +288,13 @@ a[class^="software-item tooltip"]::after {
 
 .skill-item:hover,
 .software-item:hover {
-    background-color: #45475a;
+    background-color: var(--surface1);
     transform: translateY(-5px);
     filter: brightness(1);
 }
 
 .skill-item:hover .skill-name {
-    color: #ffffff;
+    color: var(--white);
 }
 
 .skill-item > .image,
@@ -321,14 +321,14 @@ a[class^="software-item tooltip"]::after {
 
 .skill-name {
     font-size: 16px;
-    color: #a6adc8;
+    color: var(--subtext0);
     transition: 0.1s;
 }
 
 .contact-name,
 .software-name {
     font-size: 16px;
-    color: #bac2de;
+    color: var(--subtext1);
     margin-left: 10px;
     transition: 0.1s;
 }
@@ -347,19 +347,19 @@ a[class^="software-item tooltip"]::after {
 
 .contact-item:hover .contact-name,
 .software-item:hover .software-name {
-    color: #ffffff;
+    color: var(--white);
 }
 
 .github-contact {
-    background-color: #11111b;
+    background-color: var(--crust);
 }
 
 .github-contact:hover {
-    background-color: #1e1e2e;
+    background-color: var(--base);
 }
 
 .instagram-contact {
-    background-color: #b4befe;
+    background-color: var(--lavender);
 }
 
 .instagram-contact > span,
@@ -369,15 +369,15 @@ a[class^="software-item tooltip"]::after {
 }
 
 .instagram-contact:hover {
-    background-color: #cba6f7;
+    background-color: var(--mauve);
 }
 
 .twitter-contact {
-    background-color: #89b4fa;
+    background-color: var(--blue);
 }
 
 .twitter-contact:hover {
-    background-color: #b5befe;
+    background-color: var(--lavender);
 }
 
 .youtube-contact {
@@ -550,7 +550,7 @@ div[class="stats cards"] > h2 {
 
 div[class="stats cards"] > p {
     text-align: left;
-    color: #a6adc8;
+    color: var(--subtext0);
 }
 
 div[class="cards sitemap shadow"] > h3,
@@ -582,20 +582,20 @@ div[class="cards sitemap shadow"] > h4 {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    background-color: #313244ee;
+    background-color: var(--surface0)ee;
     width: 600px;
     padding: 20px;
     border-radius: 10px;
     backdrop-filter: blur(5px);
     visibility: hidden;
-    border: 2px solid #45475a;
+    border: 2px solid var(--surface1);
     opacity: 0;
     transition: 0.3s;
     z-index: 9999;
 }
 
 .popup:hover {
-    border: 2px solid #585b70;
+    border: 2px solid var(--surface2);
 }
 
 .top {
@@ -608,8 +608,8 @@ div[class="cards sitemap shadow"] > h4 {
     padding: 4px;
     height: 32px;
     width: 32px;
-    background-color: #e06c75;
-    color: #ffffff;
+    background-color: var(--red);
+    color: var(--white);
     border: none;
     border-radius: 8px;
     cursor: pointer;
@@ -644,7 +644,7 @@ div[class="cards sitemap shadow"] > h4 {
 }
 
 #artist:hover {
-    color: #cba6f7;
+    color: var(--mauve);
 }
 
 #song-cover {
@@ -655,7 +655,7 @@ div[class="cards sitemap shadow"] > h4 {
 
 #song-url {
     display: flex;
-    background-color: #89b4fa;
+    background-color: var(--blue);
     padding: 4px;
     border-radius: 6px;
     margin-right: 5px;
@@ -666,7 +666,7 @@ div[class="cards sitemap shadow"] > h4 {
 
 #refresh {
     display: flex;
-    background-color: #a6e3a1;
+    background-color: var(--green);
     padding: 4px;
     border-radius: 6px;
     max-width: 24px;
@@ -680,16 +680,16 @@ div[class="cards sitemap shadow"] > h4 {
 }
 
 #song-url:hover {
-    background-color: #89b4fa;
+    background-color: var(--blue);
 }
 
 #song-url:hover > svg {
-    color: #ffffff;
+    color: var(--white);
 }
 
 #overlay {
     z-index: 10;
-    background-color: #101010bb;
+    background-color: rgba(16, 16, 16, 0.733);
     width: 100%;
     height: 100%;
     position: fixed;
@@ -700,45 +700,3 @@ div[class="cards sitemap shadow"] > h4 {
     visibility: hidden;
     transition: 0.3s;
 }
-
-.palette {
-    position: fixed;
-    right: 30px !important;
-    top: 30px !important;
-    width: 32px;
-    cursor: pointer;
-    pointer-events: all !important;
-    transition: transform 0.1s;
-}
-
-.palette:hover {
-    transform: scale(1.04);
-}
-
-.palette:active {
-    transform: scale(0.98);
-}
-
-.themes > button {
-    font-size: 16px;
-    cursor: pointer;
-    color: var(--text);
-    border-radius: 3px;
-    padding: 4px;
-    margin-right: 10px;
-}
-
-.themes {
-    font-size: 0;
-}
-
-.selected-theme {
-    background: #313244;
-    border: 2px solid #45475a;
-    cursor: not-allowed !important;
-}
-
-.unselected-theme {
-    background: #252734;
-    border: 2px solid #353646;
-}
diff --git a/projects/index.html b/projects/index.html
index 94e045a..0af4937 100644
--- a/projects/index.html
+++ b/projects/index.html
@@ -8,10 +8,7 @@
     <link rel="shortcut icon" href="https://rimgo.pussthecat.org/RFbdMMB.png" type="image/x-icon">
 </head>
 <body>
-
-    <div class="header-main">fentseller.lol needs your help! Donate crypto <a href="/bio">here</a> to keep these sites up!</div>
-
-    <div class="main">
+    <div class="cards shadow">
         <div class="header">
             <img class="img_header" src="https://rimgo.pussthecat.org/RFbdMMB.png" alt="zyqunix' projects image">
             <h2>My Projects:</h2>
diff --git a/projects/style.css b/projects/style.css
index 7be377f..c9797bd 100644
--- a/projects/style.css
+++ b/projects/style.css
@@ -7,44 +7,16 @@ img[class="img_header"] {
     border-radius: 5px;
 }
 
-div.header-main {
-    width: 100%;
-    padding: 15px 20px 20px 20px;
-    display: flex;
-    position: fixed;
-    top: 0;
-    left: 0;
-    background-color: rgba(59, 59, 59, 0.885);
-    backdrop-filter: blur(5px);
-	-webkit-backdrop-filter: blur(5px);
-}
-
-div.header-main {
-    height: 1rem;
-}
-
-div.header-main a {
-    color: #c099ff;
-    margin: 0 5px 0 5px;
-}
-
-div.header {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    text-align: center;
-}
-
-.main {
-    width: 90%;
-    max-width: 85%;
+.cards {
+    width: 90% !important;
+    max-width: 85% !important;
     text-align: center;
     margin-bottom: 50px;
     margin-top: 50px;
 }
 
 h2 {
-    color: #ffffff;
+    color: var(--white);
     margin-bottom: 40px;
     font-size: 2rem;
 }
@@ -52,7 +24,7 @@ h2 {
 .projects h2 {
     font-size: 1rem;
     margin-bottom: 20px;
-    color: #ffffff;
+    color: var(--white);
 }
 
 .projects {
@@ -67,7 +39,7 @@ h2 {
     width: calc(33% - 40px);
     max-width: 350px;
     padding: 20px;
-    background-color: rgba(59, 59, 59, 0.885);
+    background-color: var(--surface0);
     border-radius: 10px;
     box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
     text-align: center;
@@ -75,14 +47,14 @@ h2 {
 
 .project-div *,
 .futureproject-div * {
-    color: white;
+    color: var(--white);
 }
 
 .project-div .visit-project,
 .futureproject-div .visit-futureproject {
     padding: 10px 20px;
-    background-color: #569470;
-    color: #cfcfcf;
+    background-color: var(--green);
+    color: var(--mantle);
     border-radius: 5px;
     text-decoration: none;
     margin: 0;
@@ -97,18 +69,7 @@ h2 {
 
 .project-div .visit-project strong,
 .futureproject-div .visit-futureproject strong {
-    color: #cfcfcf;
-}
-
-.project-div .visit-project:hover,
-.futureproject-div .visit-futureproject:hover {
-    background-color: #47785b;
-    color: #ffffff;
-}
-
-.project-div .visit-project:hover strong,
-.futureproject-div .visit-futureproject:hover strong {
-    color: #ffffff;
+    color: var(--mantle);
 }
 
 .project-desc,
@@ -124,7 +85,7 @@ h2 {
 
 .project-desc a:hover,
 .futureproject-desc a:hover {
-    color: #c099ff;
+    color: var(--pastel-violet);
 }
 
 @media (max-width: 768px) {