diff --git a/README.md b/README.md
index 7840fca..83b1e2f 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@
  
 ## Want to contribute? Fork the project, and do a pull request.
 
-![Contribute](https://projectfirewatch.com/cdn/contribute.png)
+![Contribute](https://projectfirewatch.com/cdn/contribute.webp)
 
 ---
  
@@ -19,4 +19,4 @@
  
 # Contributors!
 ### Moved to.
-### https://projectfirewatch.com/info/project/contributors/
+### https://projectfirewatch.com/info/project/contributors/
\ No newline at end of file
diff --git a/hugo.yaml b/hugo.yaml
index 4a4aacd..87f78ea 100644
--- a/hugo.yaml
+++ b/hugo.yaml
@@ -20,7 +20,7 @@ imaging:
   quality: 99
 
 params:
-  description: The Opensource Deep Dive Into The Game Firewatch. <br>  <img id="clickaroos" alt="Clickaroos" src="https://camo.githubusercontent.com/612c403f0241d9c1edf9ea44167dc013cb6de7457457f6e7c0a1373b3b5db65c/68747470733a2f2f686974732e736565796f756661726d2e636f6d2f6170692f636f756e742f696e63722f62616467652e7376673f75726c3d68747470732533412532462532466769746875622e636f6d253246536f7068696141746b696e736f6e2532464669726577617463682d477569646526636f756e745f62673d253233323532353235267469746c655f62673d2532333235323532352669636f6e3d2669636f6e5f636f6c6f723d253233453745374537267469746c653d436c69636b61726f6f7326656467655f666c61743d74727565">
+  description: The <a href="https://github.com/ProjectFirewatch/ProjectFirewatch">Opensource</a> Deep Dive Into The Game Firewatch. <br>  <img id="clickaroos" alt="Clickaroos" src="https://camo.githubusercontent.com/612c403f0241d9c1edf9ea44167dc013cb6de7457457f6e7c0a1373b3b5db65c/68747470733a2f2f686974732e736565796f756661726d2e636f6d2f6170692f636f756e742f696e63722f62616467652e7376673f75726c3d68747470732533412532462532466769746875622e636f6d253246536f7068696141746b696e736f6e2532464669726577617463682d477569646526636f756e745f62673d253233323532353235267469746c655f62673d2532333235323532352669636f6e3d2669636f6e5f636f6c6f723d253233453745374537267469746c653d436c69636b61726f6f7326656467655f666c61743d74727565">
   homeMetaContent: The Opensource Deep Dive Into The Game Firewatch.
   footer: <hr><h6><i>projectfirewatch.com is a community website and is <strong>NOT</strong> affiliated with Firewatch or Campo Santo.<br>Firewatch and the Firewatch logos are trademarks of Campo Santo. All other trademarks are property of their respective owners.</i></h6>
 
diff --git a/themes/cupper-hugo-theme/assets/css/template-styles.css b/themes/cupper-hugo-theme/assets/css/template-styles.css
index b2408e5..1ab5937 100644
--- a/themes/cupper-hugo-theme/assets/css/template-styles.css
+++ b/themes/cupper-hugo-theme/assets/css/template-styles.css
@@ -1,6 +1,17 @@
 /* Fonts */
 @import url("https://fonts.bunny.net/css?family=miriam-libre:400,700");
 
+:root {
+    --text-color: #E1D9D1;
+    --background: #353535;
+    --background-gradient: linear-gradient(#2a2a29, #1c1c1c);
+    --href: #FFA500;
+    --href-dark: #e59400;
+    --selector: #996300;
+    --main-font: Miriam Libre, serif;
+    --secondary-font: Arial, Helvetica Neue, sans-serif;
+}
+
 ::-webkit-scrollbar {
     display: none;
 }
@@ -24,10 +35,12 @@
 
 html {
     font-size: calc(1em + 0.33vw);
-    font-family: Arial, Helvetica Neue, sans-serif;
+    font-family: var(--secondary-font);
+    ;
     line-height: 1.5;
     color: #111;
-    background-color: #E1D9D1;
+    background-color: var(--text-color);
+    ;
 }
 
 html,
@@ -75,6 +88,8 @@ img {
     max-width: 100%;
     max-height: 50vh;
     border-radius: 2px;
+    user-select: none;
+    -webkit-user-select: none;
 }
 
 .img-link {
@@ -110,7 +125,8 @@ a {
     display: block;
     width: 100%;
     padding: none;
-    color: #E1D9D1;
+    color: var(--text-color);
+    ;
     background: #000;
     position: absolute;
     top: -3rem;
@@ -124,7 +140,8 @@ h1,
 h2,
 h3,
 h4 {
-    font-family: Miriam Libre, serif;
+    font-family: var(--main-font);
+    ;
     line-height: 1.125;
 }
 
@@ -179,7 +196,8 @@ code {
 }
 
 .cmd code {
-    color: #E1D9D1;
+    color: var(--text-color);
+    ;
     white-space: pre-wrap;
 }
 
@@ -190,7 +208,8 @@ code {
 }
 
 .cmd code::selection {
-    background: #E1D9D1;
+    background: var(--text-color);
+    ;
     color: rgba(0, 0, 0, .8);
 }
 
@@ -251,7 +270,8 @@ button {
     border-radius: 0.33em;
     font-family: inherit;
     background: #111;
-    color: #E1D9D1;
+    color: var(--text-color);
+    ;
     padding: 0.75rem;
     border: 0;
 }
@@ -264,7 +284,8 @@ button {
     border-top-left-radius: 0.33rem !important;
     box-shadow: none !important;
     background: #111 !important;
-    color: #E1D9D1 !important;
+    color: var(--text-color);
+     !important;
     position: absolute !important;
     right: 0 !important;
     bottom: 0 !important;
@@ -279,7 +300,8 @@ label {
 [for="themer"] {
     background: #111;
     border-radius: 0.33em;
-    color: #E1D9D1;
+    color: var(--text-color);
+    ;
     padding: 0.25em 0.75em;
     margin: 0.5rem;
 }
@@ -338,7 +360,8 @@ th:empty {
 .tested th {
     width: 100%;
     background-color: #111;
-    color: #E1D9D1;
+    color: var(--text-color);
+    ;
     outline-color: #111;
 }
 
@@ -376,10 +399,6 @@ caption {
     top: 0;
     left: 0;
     border-right: 2px solid;
-    background: #353535;
-    border-bottom: 4px solid #434343;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
-    color: #E1D9D1;
 }
 
 .intro-and-nav>div {
@@ -413,6 +432,10 @@ caption {
     max-width: 25rem;
 }
 
+.library-desc a {
+    color: var(--href);
+}
+
 .main-and-footer {
     margin-left: 15rem;
 }
@@ -479,7 +502,8 @@ caption {
 .pattern [aria-current] {
     background: linear-gradient(#2a2a29, #1c1c1c);
     clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
-    color: #E1D9D1;
+    color: var(--text-color);
+    ;
 }
 
 /* Menu button */
@@ -694,7 +718,8 @@ pre[class*=language-] code * {
     font-weight: bold;
     font-size: 0.5rem;
     background: #111;
-    color: #E1D9D1;
+    color: var(--text-color);
+    ;
     border-radius: 1rem;
     margin-left: 0.25rem;
     padding: 0.125em 0.5em;
@@ -734,7 +759,8 @@ pre[class*=language-] code * {
 }
 
 .file-tree li {
-    background: #E1D9D1;
+    background: var(--text-color);
+    ;
     position: relative;
     white-space: nowrap;
 }
@@ -803,7 +829,8 @@ pre[class*=language-] code * {
 [data-expands][aria-expanded="true"] svg .up-strut {
     display: none;
 }
-* + * {
+
+*+* {
     margin-top: 2.25rem;
 }
 
@@ -906,7 +933,8 @@ h1 svg {
 .colors span {
     line-height: 1;
     background-color: #111;
-    color: #E1D9D1;
+    color: var(--text-color);
+    ;
     font-size: 0.75rem;
     padding: 0.25rem;
     position: absolute;
@@ -1150,7 +1178,8 @@ h1 svg {
     }
 
     .cmd code {
-        background: #E1D9D1;
+        background: var(--text-color);
+        ;
         color: #111;
     }
 
@@ -1187,7 +1216,8 @@ h1 svg {
 
 @media (-ms-high-contrast: active) {
     img[src*=".svg"] {
-        background: #E1D9D1;
+        background: var(--text-color);
+        ;
         padding: 0.5rem;
     }
 
@@ -1206,13 +1236,17 @@ h1 svg {
 
 ::-moz-selection {
     /* Code for Firefox */
-    background: rgba(0, 0, 0, .8);
-    color: #E1D9D1;
+    background: var(--selector);
+    ;
+    color: var(--text-color);
+    ;
 }
 
 ::selection {
-    background: rgba(0, 0, 0, .8);
-    color: #E1D9D1;
+    background: var(--selector);
+    ;
+    color: var(--text-color);
+    ;
 }
 
 embed,
@@ -1229,11 +1263,14 @@ hr {
     margin: 0 0 20px;
     margin-top: 25px;
 }
+
 a:hover,
-a:active{
-    color: #FFA500;
+a:active {
+    color: var(--href);
+    ;
 }
-.emoji{
+
+.emoji {
     display: inline !important;
     border: none !important;
     box-shadow: none !important;
diff --git a/themes/cupper-hugo-theme/layouts/partials/head.html b/themes/cupper-hugo-theme/layouts/partials/head.html
index 67e8ead..ab3d406 100644
--- a/themes/cupper-hugo-theme/layouts/partials/head.html
+++ b/themes/cupper-hugo-theme/layouts/partials/head.html
@@ -2,10 +2,8 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-
   {{ hugo.Generator }}
   <link rel="canonical" href="{{ .Permalink }}" />
-
   {{ if .IsHome }}
     {{ with .Site.Params.homeMetaContent }}
       <meta name="description" content="{{ . | plainify }}">
@@ -15,7 +13,6 @@
       | default .Title }}
     <meta name="description" content="{{ $summary }}">
   {{ end }}
-
   <link rel="apple-touch-icon" sizes="180x180" href="{{ "apple-touch-icon.png" | absURL }}">
   <link rel="icon" type="image/png" sizes="32x32" href="{{ "favicon-32x32.png" | absURL }}"> 
   <link rel="icon" type="image/png" sizes="16x16" href="{{ "favicon-16x16.png" | absURL }}"> 
@@ -23,14 +20,12 @@
   <link rel="mask-icon" href="{{ "safari-pinned-tab.svg" | absURL }}" color="#ffa500"> 
   <meta name="msapplication-TileColor" content="#ffa500">
   <meta name="theme-color" content="#ffa500">
-
   <style>
     body {
       visibility: hidden;
       opacity: 0;
     }
   </style>
-
   <style id="darkTheme">
     .intro-and-nav{
       z-index: 100;
@@ -39,17 +34,17 @@
       height: 60px;
       width: 100%;
       position: fixed;
-      background:#353535;
+      background:var(--background);
       border-bottom: 4px solid #434343;
       box-shadow: 0 1px 3px rgba(0,0,0,.25);
       color:#E1D9D1;
   }
     .main-and-footer {
-      background: linear-gradient(#2a2a29,#1c1c1c);
-      color: #E1D9D1
+      background: var(--background-gradient);
+      color: var(--text-color);
     }
     .main-and-footer a{
-      color: #ffa500
+      color: var(--href);
     }
     * {
       background-color: inherit