1 files changed, 24 insertions, 18 deletions

diff --git a/styles/Main.module.scss b/styles/Main.module.scss
index 082bc80..7c3f9bc 100644
--- a/styles/Main.module.scss
+++ b/styles/Main.module.scss
@@ -1,3 +1,10 @@
+.layout {
+  color: var(--color-text);
+  height: 100vh;
+  background: var(--color-bg);
+  background: linear-gradient(to bottom right, var(--color-bg) 0%, var(--color-bg-alt) 100%);
+}
+
 .icon {
   text-decoration: none;
   display: inline-block;
@@ -12,14 +19,12 @@
     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;
+    background-color: var(--color-glass);
   }
 }
 
@@ -38,20 +43,20 @@
   input[type=password]  {
     padding: .5em;
     margin: .5em 0;
-    border: 1px solid #ccc;
-    border-radius: .25px;
+    border: 1px dashed var(--color-decor);
+    border-radius: .5px;
   }
   .error {
     text-align: center;
-    color: brown;
+    color: var(--color-error);
     margin: 1rem 0 0;
   }
 }
 
 .header {
   height: 2em;
-  background-color: rgba(255, 255, 255, 0.4);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+  background-color: var(--color-glass);
+  border-bottom: 1px solid  var(--color-window-border-bottom);
 
   nav {
     display: flex;
@@ -70,16 +75,17 @@
         & > span,
         & > a {
           display: inline-block;
-          color: #333;
+          color: var(--color-text);
           text-decoration: none;
           align-items: center;
           padding: .25em .5em;
           margin: .25em;
           border-radius: .5em;
-          transition: .3s background;
+          transition: .3s background, .3s color;
 
           &:hover {
-            background-color: rgba(0,0,0,.1);
+            background-color: var(--color-selected);
+            color: var(--color-text-alt);
           }
         }
       }
@@ -103,10 +109,11 @@
   padding: .25em .5em;
   margin: .25em;
   border-radius: .5em;
-  transition: .3s background;
+  transition: .3s background, .3s color;
 
   &:hover {
-    background-color: rgba(0,0,0,.1);
+    color: var(--color-text-alt);
+    background-color: var(--color-selected);
   }
 
 }
@@ -117,8 +124,8 @@
   top: 2.1em;
   width: 8em;
   padding: .5em;
-  background-color: rgba(255, 255, 255, 0.5);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
+  background-color: var(--color-window-content);
+  border-bottom: 1px solid var(--color-window-border-bottom);
   border-radius: .5em;
 
   & > li > span {
@@ -132,7 +139,6 @@
 
     & > input {
       padding: .75em;
-      border: 1px dashed #333;
       border-radius: .5em;
     }
   }
@@ -143,10 +149,10 @@
   }
 
   .email {
-    color: blue;
+    color: var(--color-link);
     // cursor: pointer;
   }
   .error {
-    color: brown;
+    color: var(--color-error);
   }
 }