Align styling with bengoldsworthy.net

public/css/app.css

@@ -1,11 +1,19 @@
+:root {
+    --dark: #020202;
+    --light: #fffff0;
+}
+
 /*
  *  Typography
  */
 
 body {
-    font-family: Verdana, Arial, sans-serif;
+    /*font-family: Verdana, Arial, sans-serif;*/
     font-size: 16px;
     margin: 0;
+    color: var(--dark, #020202);
+    background-color: var(--light, #fffff0);
+    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
 }
 
 .page-title {
@@ -36,6 +44,15 @@ details h2 {
     font-size: 0.8em;
 }
 
+#allCheckinsLink {
+    opacity: 0.7;
+    color: var(--dark, #020202);
+}
+
+#allCheckinsLink:hover {
+    opacity: 1;
+}
+
 /*
  *  Layout
  */
@@ -44,7 +61,6 @@ body {
     border: 5px solid black;
     box-sizing: border-box;
     height: 100vh;
-/*    overflow: hidden;*/
     display: grid;
     grid-template-rows: auto 1fr;
     grid-template-columns: 100%;
@@ -55,8 +71,8 @@ body {
 
 .page-header {
     grid-area: header;
-    background-color: #a4ecfc;
     border-bottom: 5px solid black;
+    padding-top: 1em;
 }
 
 .other-links {
@@ -73,10 +89,9 @@ body {
 }
 
 .other-links li {
-    background-color: #5adefc;
     float: left;
     margin-left: 1.5em;
-    border: 2px solid white;
+    border: 2px solid var(--dark);
     border-radius: 1em;
 }
 
@@ -85,7 +100,7 @@ body {
 }
 
 .other-links li:hover {
-    background-color: #2389a0;
+    background-color: #ddddd2;
 }
 
 .other-links li p {
@@ -94,7 +109,7 @@ body {
 }
 
 .other-links li p a {
-    color: #fff;
+    color: var(--dark, #020202);
     font-weight: bold;
     text-decoration: none;
 }
@@ -185,6 +200,8 @@ body {
     max-height: 45vh;
     margin-top: 1em;
     display: block;
+    background-color: white;
+    border: 2px solid var(--dark, #020202);
 }
 
 /*