Improving back button styling and colour schemes.

www/css/main.css

@@ -89,18 +89,41 @@ textarea {
    ========================================================================== */
 
 :root {
-  --jason-bg-color: #F2EDEA;
-  --jason-accent-color: #302B44;
-  --jason-hover-bg-color: #913A50;
-  --jason-hover-fg-color: #FFFFFF;
-  --flo-bg-color: #601F22;
-  --flo-accent-color: #FFE4E1;
-  --flo-hover-bg-color: #00C4FF;
-  --flo-hover-fg-color: #FFFFFF;
-  --lucy-bg-color: #ECCFC3;
-  --lucy-accent-color: #904C77;
-  --lucy-hover-bg-color: #E49AB0;
-  --lucy-hover-fg-color: #000000;
+  --jason-bg: #F2EDEA;
+  --jason-title-fg: #302B44;
+  --jason-link-bg: var(--jason-title-fg);
+  --jason-link-fg: var(--jason-bg);
+  --jason-hover-bg: #913A50;
+  --jason-hover-fg: #FFFFFF;
+  --jason-back-bg: #B05C7144;
+  --jason-back-fg: var(--jason-title-fg);
+  --jason-back-fg: #585568;
+
+  --flo-bg: #601F22;
+  --flo-title-fg: #FFE4E1;
+  --flo-link-bg: var(--flo-title-fg);
+  --flo-link-fg: var(--flo-bg);
+  --flo-hover-bg: #00C4FF;
+  --flo-hover-fg: #FFFFFF;
+  --flo-back-bg: #FFE4E188;
+  --flo-back-fg: #998987;
+  --flo-back-fg: var(--flo-bg);
+
+  --lucy-bg: #ECCFC3;
+  --lucy-title-fg: #904C77;
+  --lucy-link-bg: #ECB8A5;
+  --lucy-link-fg: var(--lucy-title-fg);
+  --lucy-hover-bg: #E49AB0;
+  --lucy-hover-fg: #333333;
+  --lucy-back-bg: #ECB8A5;
+  --lucy-back-fg: var(--lucy-title-fg);
+  --lucy-bio-fg: #333333;
+  --lucy-bio-link: var(--lucy-title-fg);
+  --lucy-bio-link-hover: #E49AB0;
+  --lucy-alert-bg: var(--lucy-title-fg);
+  --lucy-alert-fg: #FFFFFF;
+  --lucy-alert-link: #ECCFC3;
+  --lucy-alert-link-hover: var(--lucy-bio-link-hover);
 }
 
 body {
@@ -184,7 +207,6 @@ div {
 
 .links #lost
 {
-  background-color: #ECB8A5;
   margin: 0 auto 0 auto;
   width: 90%;
   margin-bottom: 1rem;
@@ -201,15 +223,13 @@ div {
   width: 3rem;
   z-index: 100;
   border-radius: 1rem;
-  background-color: rgba(0, 0, 0, 0.5);
-  color: rgba(192, 192, 192, 0.5);
   font-size: 2rem;
   line-height: 3rem;
   text-align: center;
 }
 
 .splash.jason, .main.jason {
-  background-color: var(--jason-bg-color);
+  background-color: var(--jason-bg);
   font-family: 'Raleway', sans-serif;
 }
 
@@ -221,21 +241,30 @@ div {
 
 .jason h1 a {
   text-decoration: none;
-  color: var(--jason-accent-color);
+  color: var(--jason-title-fg);
 }
 
 .links.jason li a {
-  background-color: var(--jason-accent-color);
-  color: var(--jason-bg-color);
+  background-color: var(--jason-link-bg);
+  color: var(--jason-link-fg);
 }
 
 .links.jason li a:hover {
-  background-color: var(--jason-hover-bg-color);
-  color: var(--jason-hover-fg-color);
+  background-color: var(--jason-hover-bg);
+  color: var(--jason-hover-fg);
+}
+
+#backbutton.jason {
+  background-color: var(--jason-back-bg);
+  color: var(--jason-back-fg);
+}
+
+#backbutton.jason a {
+  color: var(--jason-back-fg);
 }
 
 .splash.flo, .main.flo {
-  background-color: var(--flo-bg-color);
+  background-color: var(--flo-bg);
   font-family: 'Quicksand', sans-serif;
 }
 
@@ -246,21 +275,30 @@ div {
 
 .flo h1 a {
   text-decoration: none;
-  color: var(--flo-accent-color);
+  color: var(--flo-title-fg);
 }
 
 .links.flo li a {
-  background-color: var(--flo-accent-color);
-  color: var(--flo-bg-color);
+  background-color: var(--flo-link-bg);
+  color: var(--flo-link-fg);
 }
 
 .links.flo li a:hover {
-  background-color: var(--flo-hover-bg-color);
-  color: var(--flo-hover-fg-color);
+  background-color: var(--flo-hover-bg);
+  color: var(--flo-hover-fg);
+}
+
+#backbutton.flo {
+  background-color: var(--flo-back-bg);
+  color: var(--flo-back-fg);
+}
+
+#backbutton.flo a {
+  color: var(--flo-back-fg);
 }
 
 .splash.lucy, .main.lucy {
-  background-color: var(--lucy-bg-color);
+  background-color: var(--lucy-bg);
   font-family: 'Asap', sans-serif;
 }
 
@@ -271,25 +309,51 @@ div {
 
 .lucy h1 a {
   text-decoration: none;
-  color: var(--lucy-accent-color);
+  color: var(--lucy-title-fg);
+}
+
+#lost.lucy {
+  background-color: var(--lucy-alert-bg);
+  color: var(--lucy-alert-fg);
+}
+
+#lost.lucy a {
+  color: var(--lucy-alert-link);
+}
+
+#lost.lucy a:hover {
+  color: var(--lucy-alert-link-hover);
+}
+
+.links.lucy {
+  color: var(--lucy-bio-fg);
 }
 
 .links.lucy a {
-  color: var(--lucy-accent-color);
+  color: var(--lucy-bio-link);
 }
 
 .links.lucy a:hover {
-  color: #FF0000;
+  color: var(--lucy-bio-link-hover);
 }
 
 .links.lucy li a {
-  background-color: var(--lucy-accent-color);
-  color: var(--lucy-bg-color);
+  background-color: var(--lucy-link-bg);
+  color: var(--lucy-link-fg);
 }
 
 .links.lucy li a:hover {
-  background-color: var(--lucy-hover-bg-color);
-  color: var(--lucy-hover-fg-color);
+  background-color: var(--lucy-hover-bg);
+  color: var(--lucy-hover-fg);
+}
+
+#backbutton.lucy {
+  background-color: var(--lucy-back-bg);
+  color: var(--lucy-back-fg);
+}
+
+#backbutton.lucy a {
+  color: var(--lucy-back-fg);
 }