Switched to css variables

src/static/css/main.css

@@ -1,9 +1,16 @@
 @import url('https://rsms.me/inter/inter.css');
 
+:root {
+	--gray-100: #161616;
+	--gray-90: #262626;
+	--gray-90-hover: #333333;
+	--gray-70: #525252;
+	--gray-10: #f4f4f4;
+	--green: #8ac159;
+}
+
 html {
-	color: #ffffff;
-	font-family: Inter var, sans-serif;
-	background: #161616; /* Gray 100 */
+	background: var(--gray-100);
 }
 
 *, *::before, *::after {
@@ -11,6 +18,8 @@ html {
 }
 
 body {
+	font-family: Inter var, sans-serif;
+	color: var(--gray-10);
 	font-size: 1rem;
 	line-height: 1.375rem;
 	font-weight: 400;
@@ -32,7 +41,6 @@ h1,h2,h3,h4,h5,h6 {
 	margin: 0;
 }
 h1 {
-	/* color: #8bc34a; */
 	font-size: 3.375rem;
 	line-height: 4rem;
 	font-weight: 300;
@@ -85,8 +93,8 @@ a {
 	padding: 12px 24px;
 	margin: 12px;
 
-	color: #f4f4f4;
-	background: #262626; /* Gray 90 */
+	color: white;
+	background: var(--gray-90);
 	text-decoration: none;
 
 	border: 2px solid transparent;
@@ -96,10 +104,10 @@ a {
 	transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 a:hover {
-	background: #333333; /* Gray 90 Hover */
+	background: var(--gray-90-hover);
 }
 a:active {
-	background: #525252; /* Gray 70 */
+	background: var(--gray-70);
 }
 a:focus {
 	border: 2px solid white;
@@ -133,7 +141,7 @@ footer {
 	font-size: .875rem;
 	line-height: 1.125rem;
 	font-weight: 400;
-	background: #262626;
+	background: var(--gray-90);
 }
 
 footer p {