Use css vars

static/style.css

@@ -1,3 +1,13 @@
+:root {
+  --background: #aab5a9;
+  --foreground: #000000;
+  --dark-accent: #383e38;
+  --white: #ffffff;
+  --off-white: #f0f0f0;
+  --danger-red: #942626;
+  --success-green: #289426;
+}
+
 * {
   box-sizing: border-box;
   margin: 0;
@@ -21,18 +31,18 @@ a:hover {
 
 .btn {
   cursor: pointer;
-  background: #ffffff;
-  border: 1px solid #383e37;
+  background: var(--white);
+  border: 1px solid var(--dark-accent);
   border-radius: 0;
   padding: 0.15em 0.3em;
 }
 
 .btn:hover {
-  background-color: #f0f0f0;
+  background-color: var(--off-white);
 }
 
 .danger {
-  color: #942626;
+  color: var(--danger-red);
 }
 
 .container {
@@ -92,7 +102,7 @@ a:hover {
 .post__heading {
   align-items: center;
   background: white;
-  border: 1px solid #383e37;
+  border: 1px solid var(--dark-accent);
   display: flex;
   flex-wrap: wrap;
   font-size: 12px;
@@ -130,8 +140,8 @@ a:hover {
 }
 
 .message {
-  border: 1px solid #383e37;
-  color: #fff;
+  border: 1px solid var(--dark-accent);
+  color: var(--white);
   margin: 0.5em 0;
   padding: 0.25em 1.5em;
   text-align: center;
@@ -139,11 +149,11 @@ a:hover {
 }
 
 .message--error {
-  background-color: #942626;
+  background-color: var(--danger-red);
 }
 
 .message--success {
-  background-color: #289426;
+  background-color: var(--success-green);
 }
 
 .error__heading {