4 files changed, 34 insertions, 11 deletions
diff --git a/styles/global.scss b/styles/global.scss
index f72a66b..ad4a51a 100644
--- a/styles/global.scss
+++ b/styles/global.scss
@@ -53,3 +53,8 @@ textarea, input {
     display: none!important;
   }
 }
+
+.active {
+  color: var(--color-text-alt)!important;
+  font-weight: 600;
+}
diff --git a/styles/global/_themes.scss b/styles/global/_themes.scss
index e0b146f..4127c4c 100644
--- a/styles/global/_themes.scss
+++ b/styles/global/_themes.scss
@@ -2,7 +2,7 @@
   --color-bg: #50a3a2;
   --color-bg-alt: #53e3a6;
   --color-text: #333;
-  --color-text-alt: #111;
+  --color-text-alt: #000;
   --color-decor: #ccc;
   --color-glass: rgb(151, 215, 200, .9);
   --color-glass-alt: rgba(255, 255, 255, 0.5);
@@ -31,7 +31,7 @@
   --color-bg: #71b0d7;
   --color-bg-alt: #a4e4fd;
   --color-text: #333;
-  --color-text-alt: #111;
+  --color-text-alt: #000;
   --color-decor: #ccc;
   --color-glass: rgba(151, 192, 230, 0.9);
   --color-glass-alt: rgba(255, 255, 255, 0.5);
@@ -59,7 +59,7 @@
 .black {
   --color-bg: #000;
   --color-bg-alt: #222;
-  --color-text: #eee;
+  --color-text: #ddd;
   --color-text-alt: #fff;
   --color-decor: #ccc;
   --color-glass: rgb(20, 20, 20, .9);
diff --git a/styles/global/_window.scss b/styles/global/_window.scss
index cf78752..9f224a9 100644
--- a/styles/global/_window.scss
+++ b/styles/global/_window.scss
@@ -137,11 +137,6 @@
       pointer-events: none;
     }
 
-    .active {
-      color: var(--color-text-alt);
-      font-weight: 600;
-    }
-
     @media(max-width: 40em) {
       height: 3em;
       overflow: auto;
diff --git a/styles/main/_header.scss b/styles/main/_header.scss
index e6ac70f..ea75f5e 100644
--- a/styles/main/_header.scss
+++ b/styles/main/_header.scss
@@ -28,10 +28,33 @@
       & > li {
         display: inline-block;
 
-        & > span > span {
-          padding: .75em;
+        @media(max-width: 40em) {
+          & > span:first-of-type {
+            display: flex!important;
+            width: 100%;
+          }
+
+          & > span > span:first-of-type {
+            flex-grow: 1;
+          }
+        }
+
+        & > span > span:nth-of-type(2),
+        & > span > span:nth-of-type(3) {
+          margin: .25em .25em .25em .5em;
+          padding: .5em;
           display: inline-block;
-          margin-left: .5em;
+          border-top: 1px solid var(--color-window-border-top);
+          border-bottom: 1px solid var(--color-window-border-bottom);
+          border-radius: .5em;
+          background-color: var(--color-window-content);
+        }
+
+        & > span > span:nth-of-type(2) {
+          margin-left: 1em;
+        }
+
+        & > span > span:nth-of-type(3) {
           color: var(--color-error);
         }