1 files changed, 28 insertions, 13 deletions

diff --git a/public/style.css b/public/style.css
index 999fb7c..cd207a5 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1,3 +1,16 @@
+/* Constants */
+
+:root {
+  /* Colors */
+  --color-brown: #A56D35;
+  --color-dark-brown: #6A4115;
+  --color-blue: #515170;
+  --color-light-gray: #EEEEEE;
+  --color-dark-gray: #666666;
+}
+
+/* Animation */
+
 @keyframes appear {
     0.0% {
         transform: translateX(0.8rem);
@@ -8,6 +21,8 @@
     }
 }
 
+/* Media */
+
 @media screen and (max-width: 500px) {
     html {
         font-size: 90%;
@@ -26,6 +41,8 @@
     }
 }
 
+/* Style */
+
 body {
     overflow-x: hidden;
     margin: 0;
@@ -62,7 +79,7 @@ ul {
 
 .g-List__Item::before {
     content: "•";
-    color: #bf7f3f;
+    color: var(--color-brown);
     display: inline-block;
     margin-right: 0.5rem;
 }
@@ -72,7 +89,7 @@ ul {
 }
 
 .g-Image {
-    border: solid 1px #646464;
+    border: solid 1px var(--color-dark-gray);
     border-radius: 0.5rem;
     margin-bottom: 1rem;
     width: 100%;
@@ -80,15 +97,14 @@ ul {
 }
 
 .g-Header {
-    background-color: #bf7f3f;
-    font-size: 2.5rem;
+    background-color: var(--color-brown);
     display: flex;
-    font-variant: small-caps;
 }
 
 .g-Header__Link {
     display: flex;
-    font-size: 0.6em;
+    font-size: 1.5rem;
+    font-weight: bold;
     justify-content: center;
     align-items: center;
     flex-grow: 1;
@@ -103,12 +119,12 @@ ul {
 .g-Header__Link:hover,
 .g-Header__Link:focus,
 .g-Header__Link--Current {
-    border-bottom: #9a5f20 solid 0.6rem;
+    border-bottom: var(--color-dark-brown) solid 0.6rem;
 }
 
 .g-IconLink__Link {
     text-decoration: none;
-    color: #515170;
+    color: var(--color-blue);
     transition: color 0.3s ease-out 0.0s;
     display: inline-flex;
     align-items: center;
@@ -134,18 +150,17 @@ ul {
 
 .g-Resume__Title > em {
     font-style: normal;
-    border-bottom: solid 0.2rem #bf7f3f;
+    border-bottom: solid 0.2rem var(--color-brown);
 }
 
 .g-Section__Title {
-    color: #bf7f3f;
+    color: var(--color-brown);
     font-size: 1.8rem;
     font-weight: lighter;
     margin-bottom: 2rem;
     margin-top: 3.5rem;
-    border-bottom: 0.1rem solid #bf7f3f;
+    border-bottom: 0.2rem solid var(--color-brown);
     padding-bottom: 0.5rem;
-    font-variant: small-caps;
     letter-spacing: 0.1rem;
 }
 
@@ -164,7 +179,7 @@ ul {
     font-size: 0.8rem;
     margin-right: 1rem;
     margin-bottom: 0.5rem;
-    background-color: #EEEEEE;
+    background-color: var(--color-light-gray);
     border-radius: 0.1rem;
     padding: 0 0.5rem;
 }