diff --git a/web/App.svelte b/web/App.svelte
index 3aa5121..01f948d 100644
--- a/web/App.svelte
+++ b/web/App.svelte
@@ -45,8 +45,7 @@
 main {
 	display: flex;
 	justify-content: center;
-	margin-top: 5rem;
-
+	padding-top: 5rem;
 }
 
 </style>
diff --git a/web/index.css b/web/index.css
index fbef3b8..3a8789b 100644
--- a/web/index.css
+++ b/web/index.css
@@ -1,5 +1,12 @@
+*{
+    --color-primary: #1f6feb;
+    --color-secondary: #58a6ff;
+    --color-bg: #0d1117;
+}
+
+
 body {
-    background-color: #0d1117;
+    background-color: var(--color-bg);
     font-family: sans-serif;
 }
 
diff --git a/web/opener/Text.svelte b/web/opener/Text.svelte
index 952abd0..bc1d511 100644
--- a/web/opener/Text.svelte
+++ b/web/opener/Text.svelte
@@ -37,15 +37,15 @@
 		font-size: 1.5rem;
 		font-weight: bold;
 		margin-bottom: 1rem;
-		color: #58a6ff;
-		border-bottom: solid 1px #1f6feb;
+		color: var(--color-secondary);
+		border-bottom: solid 1px var(--color-primary);
 		
 		padding: 1rem;
 	}
 
 	.container{
 		border-width: 2px;
-		border-color: #1f6feb;
+		border-color: var(--color-primary);
 		border-style: solid;
 		border-radius: 5px;
 		min-width: 50rem;