Review global.css

- Trying to make it less of a mess.

static/css/global.css

@@ -1,5 +1,5 @@
 
-/* Default theme */
+/* Dark theme */
 :root {
   --background-color: #2d2d2d;
   --headings-color: #ffffff;
@@ -7,24 +7,19 @@
   --border-color: #ffffff;
   --line-color: #ffffff;
   --link-color: #CC99FF;
+  --link-color-hover: #ffffff;
 }
 
-/* Dark theme */
+/* Light theme */
-html[data-theme='dark'] {
+html[data-theme='light'] {
-  --background-color: #2d2d2d;
+  --background-color: #ffffff;
-  --headings-color: #ffffff;
+  --headings-color: #181818;
-  --font-color: #ffffff;
+  --font-color: #181818;
-  --line-color: #eeeeee;
+  --line-color: #181818;
+  --nav-link-color: #2599fd;
+  --nav-link-color-hover: #000000;
   --link-color: #CC99FF;
-}
+  --link-color-hover: #000000;
-
-hr {
-  background-color: var(--line-color);
-}
-
-li a:hover {
-  border-bottom: 3px solid var(--line-color);
-  text-decoration: none;
 }
 
 body {
@@ -45,13 +40,31 @@ hr {
   background-color: var(--line-color);
 }
 
+header {
+  background-color: var(--background-color);
+}
+
 nav {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
   max-width: 1200px;
   margin: 0 auto;
 }
 
+nav li {
+  font-size: 1rem;
+  padding: 2px 8px;
+  text-align: center;
+}
+
+li a {
+  text-decoration: none;
+}
+
 li a:hover {
-  border-bottom: 3px solid var(--line-color);
+  border-bottom: 2px solid var(--line-color);
   text-decoration: none;
 }
 
@@ -60,9 +73,10 @@ a {
 }
 
 a:hover {
-  color: var(--font-color);
+  color: var(--link-color-hover);
 }
 
+/* Banner */
 .overlay {
   background-size: cover;
   background-position: center;
@@ -81,45 +95,11 @@ a:hover {
   text-decoration: none;
 }
 
-nav {
+/* Content */
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-
-/* flexbox navbar test */
-nav ul {
-  display: flex;
-  padding: 0;
-  margin: 0;
-}
-
-nav ul li {
-  font-size: 1rem;
-  text-align: center;
-  padding: 5px 15px;
-}
-
-nav li {
-  list-style-type: none;
-}
-
-/* Change color on hover */
-nav li a {
-  text-decoration: none;
-}
-
 main {
   margin-top: 20px;
 }
 
-footer {
-  border-top: 3px solid var(--border-color);
-  margin-bottom: 30px;
-}
-
-/* Content types */
 section {
   border-radius: 5px;
   padding: 5px 20px;
@@ -180,6 +160,11 @@ input:checked + .slider:before {
   border-radius: 50%;
 }
 
+footer {
+  border-top: 3px solid var(--border-color);
+  margin-top: 30px;
+}
+
 /* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
 @media screen and (max-width: 700px) {
   .title {