more css styling

assets/css/main.css

@@ -11,6 +11,9 @@
   --text: var(--light);
   --links: var(--beetbox-blue);
   --link-hover: var(--beetbox-pink);
+
+  --header: #F8F8FFCC;
+  --header-link: #5C2673; /* darker purple */
 }
 
 body {
@@ -22,42 +25,48 @@ body {
   margin: 0;
 }
 
-a {
+header {
-  color: var(--links);
+  background-color: var(--header);
-  text-decoration: none;
-  transition: color 0.2s ease;
-}
-
-a:hover {
-  color: var(--link-hover);
-  text-decoration: underline;
 }
 
-p {
+header div, main, footer {
-  margin-bottom: 1.5rem;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 1rem;
 }
 
-header {
+header div {
-  padding: 4px;
+  display: flex;
-  background-color: #f8f8ffcc;
+  align-items: baseline;
+  justify-content: space-between;
 }
 
-header div {max-width: 1200px; margin: 0 auto;}
+header ul {margin: 0}
 
-nav ul li { font-weight: 600; }
+header a {color: var(--header-link);}
 
-main {
+header li {
-  max-width: 1200px;
+  display: inline;
-  margin: 0 auto;
+  font-weight: 600;
-  padding: 1rem;
+  margin-right: 8px;
 }
 
 footer {
   border-top: 1px solid var(--light);
-  max-width: 1200px;
-  margin: 0 auto;
 }
 
+a {
+  color: var(--links);
+  text-decoration: none;
+}
+
+a:visited, a:hover {
+  color: var(--link-hover);
+  text-decoration: underline;
+}
+
+p { margin-bottom: 1.5rem; }
+
 code { white-space: nowrap; }
 
 pre {
@@ -75,4 +84,4 @@ pre code {
 	overflow-x: auto;
 	border-left: .3rem solid var(--beetbox-purple);
    	border-radius: .4rem;
-	}
+}