1 files changed, 59 insertions, 32 deletions

diff --git a/styles/Main.module.scss b/styles/Main.module.scss
index 15be72a..082bc80 100644
--- a/styles/Main.module.scss
+++ b/styles/Main.module.scss
@@ -1,17 +1,25 @@
 .icon {
   text-decoration: none;
   display: inline-block;
-  width: 4em;
-  cursor: pointer;
+  width: 4.5em;
+  padding: .5em;
 
   img {
-    width: 4em;
+    width: 3em;
   }
 
   p {
-    padding-top: .5em;
+    margin-top: .25em;
+    padding: .25em;
     text-align: center;
     color: #333;
+    transition: .2s background;
+    border-radius: .5em;
+  }
+
+  &:focus p {
+    background-color: rgba(255,255,255,.3);
+    // background-color: #0cc;
   }
 }
 
@@ -42,7 +50,6 @@
 
 .header {
   height: 2em;
-  padding: 0.5rem;
   background-color: rgba(255, 255, 255, 0.4);
   border-bottom: 1px solid rgba(255, 255, 255, 0.5);
 
@@ -53,28 +60,54 @@
       flex-grow: 1;
       overflow: auto;
     }
-  }
 
-  li {
-    margin-left: 1em;
-    margin-right: 1em;
-    display: inline-block;
-    cursor: pointer;
-
-    & > span,
-    & > a {
-      color: #333;
-      font-weight: 600;
-      text-decoration: none;
-      align-items: center;
+    ul {
+      display: block;
+
+      & > li {
+        display: inline-block;
+
+        & > span,
+        & > a {
+          display: inline-block;
+          color: #333;
+          text-decoration: none;
+          align-items: center;
+          padding: .25em .5em;
+          margin: .25em;
+          border-radius: .5em;
+          transition: .3s background;
+
+          &:hover {
+            background-color: rgba(0,0,0,.1);
+          }
+        }
+      }
     }
   }
 }
 
+.headerOverlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  cursor: auto;
+}
+
 .user {
   font-weight: 600;
-  cursor: pointer;
+  // cursor: pointer;
   position: relative;
+  padding: .25em .5em;
+  margin: .25em;
+  border-radius: .5em;
+  transition: .3s background;
+
+  &:hover {
+    background-color: rgba(0,0,0,.1);
+  }
 
 }
 
@@ -82,20 +115,14 @@
   position: absolute;
   right: 4px;
   top: 2.1em;
-  width: 10em;
+  width: 8em;
   padding: .5em;
-  background-color: rgba(255, 255, 255, .9);
-  border: 1px solid rgba(255, 255, 255, .5);
+  background-color: rgba(255, 255, 255, 0.5);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
+  border-radius: .5em;
 
-  & > li {
-    margin: 0;
-    padding:.5em;
-    width: 100%;
-    line-height: em;
-
-    &:hover {
-      background-color: #ddd;
-    }
+  & > li > span {
+    text-decoration: none;
   }
 }
 
@@ -117,7 +144,7 @@
 
   .email {
     color: blue;
-    cursor: pointer;
+    // cursor: pointer;
   }
   .error {
     color: brown;