change color scheme

css/main.css

@@ -1,21 +1,21 @@
 :root {
 	color-scheme: light dark;
 
-	--color-dark: #2e303e;
-	--color-dark-alt: #3c3f52;
-	--color-light: #ebeeef;
-	--color-light-alt: #dbe1e3;
-	--color-cyan-dark: #18737b;
-	--color-cyan-light: #25b0bc;
-	--color-pink-dark: #94195d;
-	--color-pink-light: #ee9fcb;
+	--color-dark: #1c1b19;
+	--color-dark-alt: #2e2c28;
+	--color-light: #eae0d1;
+	--color-light-alt: #cec4b5;
+	--color-blurple-dark: #352188;
+	--color-blurple-light: #9a91be;
+	--color-green-dark: #165742;
+	--color-green-light: #8db8ab;
 
 	--color-text: light-dark(var(--color-dark), var(--color-light));
 	--color-bg: light-dark(var(--color-light), var(--color-dark));
 	--color-gray: light-dark(var(--color-light-alt), var(--color-dark-alt));
-	--color-cyan: light-dark(var(--color-cyan-dark), var(--color-cyan-light));
-	--color-cyan-flipped: light-dark(var(--color-cyan-light), var(--color-cyan-dark));
-	--color-pink: light-dark(var(--color-pink-dark), var(--color-pink-light));
+	--color-blurple: light-dark(var(--color-blurple-dark), var(--color-blurple-light));
+	--color-blurple-flipped: light-dark(var(--color-blurple-light), var(--color-blurple-dark));
+	--color-green: light-dark(var(--color-green-dark), var(--color-green-light));
 }
 
 * {
@@ -85,14 +85,14 @@ p {
 }
 
 a {
-	color: var(--color-cyan);
+	color: var(--color-blurple);
 	text-decoration-thickness: .1rem;
 	transition: text-decoration-thickness .5s;
 	border-radius: .05rem;
 }
 
 a:visited {
-	color: var(--color-pink);
+	color: var(--color-green);
 }
 
 @media (any-hover: hover) {
@@ -102,11 +102,11 @@ a:visited {
 }
 
 a:focus-visible {
-	outline: solid var(--color-pink);
+	outline: solid var(--color-green);
 }
 
 a:visited:focus-visible {
-	outline-color: var(--color-cyan);
+	outline-color: var(--color-blurple);
 }
 
 main ul {
@@ -124,5 +124,5 @@ iframe {
 }
 
 .teal {
-	color: var(--color-cyan);
+	color: var(--color-blurple);
 }