Rewrote colors to use variables

src/layouts/Layout.astro

@@ -42,9 +42,16 @@ const description: string = "A reference for all esports Servants, CEs and alrea
     	--speed: 50%;
     	--ease: 50%;
     	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+		--c-darkgray: #1e1e1e;
+		--c-duskgray: #242424;
+		--c-gray: #2e2e2e;
+		--c-lightgray: #3e3e3e;
+		--c-darkpurple: #b86cff;
+		--c-purplepink: #c105ff;
+		--c-darkergray: #1b1b1b;
 	}
 	body {
-		background: #3e3e3e;
+		background: var(--c-lightgray);
 		margin: 0px;
 	}
 </style>

src/layouts/baseSection.astro

@@ -35,7 +35,7 @@ const { title } = Astro.props;
         margin: 0.5rem 0px 0.5rem 0.5em;
         padding: 0.25rem 0.75rem;
         width: max-content;
-        background-color: #1e1e1e;
+        background-color: var(--c-darkgray);
     }
 	@media(min-width: 512px) {	
     	div {

src/layouts/basicSection.astro

@@ -19,7 +19,7 @@ const { title } = Astro.props;
         margin: 0.5rem 0px 0.5rem 0.5em;
         padding: 0.25rem 0.75rem;
         width: max-content;
-        background-color: #1e1e1e;
+        background-color: var(--c-darkgray);
     }
     div {
         row-gap: 1em;

src/layouts/contactSection.astro

@@ -18,7 +18,7 @@ h1 {
     margin: 0.5rem 0px 0.5rem 0.5em;
     padding: 0.25rem 0.75rem;
     width: max-content;
-    background-color: #1e1e1e;
+    background-color: var(--c-darkgray);
 }
 div {
     row-gap: 1em;

src/layouts/hometitle.astro

@@ -26,6 +26,6 @@
         font-weight: bold;
         color: white;
         font-size: 5em;
-        background-color: #1e1e1e;
+        background-color: var(--c-darkgray);
     }
 </style>

src/layouts/taSection.astro

@@ -28,7 +28,7 @@ const { title } = Astro.props;
         margin: 0.5rem 0px 0.5rem 0.5em;
         padding: 0.25rem 0.75rem;
         width: max-content;
-        background-color: #1e1e1e;
+        background-color: var(--c-darkgray);
     }
     h2 {
         color: white;