changing colours for visits/remaining

public/stylesheets/main.css

@@ -18,15 +18,24 @@ html {
 
 body {
   background-color: black;
+  color: white;
 }
 
 
 a {
-  color: var(--neon-green);
+  color: var(--neon-yellow);
   text-decoration: none;
   /* font-weight: bold; */
 }
 
+.remaining {
+  color: var(--neon-red);
+}
+
+.visits {
+  color: var(--neon-green);
+}
+
 .site {
   margin: 8px;
   display: inline;
@@ -37,7 +46,12 @@ a {
   display: inline;
 }
 
+h2 {
+  color: var(--neon-blue);
+}
+
 .title h1 {
+  color: var(--neon-blue);
   text-align: left;
   padding-left: 16px;
   padding-right: 16px;
@@ -45,6 +59,7 @@ a {
 }
 
 .title h2,h3 {
+  color: white;
   margin-top: 8px;
   margin-left: 36px;
 }

views/index.pug

@@ -11,15 +11,13 @@ block content
     - var num = (visits.length/totalSites) * 100
     - var percent = num.toFixed(2);
     h2= percent + "% Complete"
-    
 
   - var sitesVisited = []; 
-
   h2= "Visits"
   each visit in visits
     - sitesVisited.push(visit.id);
     div(class="listing")
-      h3(class="site") #[a(href="/sites/" + visit.slug) #{visit.site}]
+      h3(class="site") #[a(class="visits" href="/sites/" + visit.slug) #{visit.site}]
       //- Commmand list of all the states
       h5(class="state") 
         - var states = visit.states.split(',')
@@ -32,7 +30,7 @@ block content
   each site in sites
     if !(sitesVisited.includes(site.id))
       div(class="listing")
-        h3(class="site") #[a(href="/sites/" + site.slug) #{site.site}]
+        h3(class="site") #[a(class="remaining" href="/sites/" + site.slug) #{site.site}]
         //- Commmand list of all the states
         h5(class="state") 
           - var states = site.states.split(',')