1 files changed, 87 insertions, 7 deletions

diff --git a/styles/Main.module.scss b/styles/Main.module.scss
index 3f0230c..bac6a97 100644
--- a/styles/Main.module.scss
+++ b/styles/Main.module.scss
@@ -9,8 +9,8 @@
 .icon {
   text-decoration: none;
   display: inline-block;
-  width: 4.5em;
   padding: .5em;
+  text-align: center;
 
   img {
     width: 3em;
@@ -19,7 +19,6 @@
   p {
     margin-top: .25em;
     padding: .25em;
-    text-align: center;
     transition: .2s background;
     border-radius: .5em;
   }
@@ -30,6 +29,8 @@
 }
 
 .userForm {
+  padding: 2em;
+
   label,
   & {
     display: flex;
@@ -50,11 +51,77 @@
     border-radius: .5px;
   }
 
+
+  input[type=password]:nth-of-type(2)  {
+    margin-top: 1em;
+  }
+
   p {
     text-align: center;
     color: var(--color-error);
     margin: 1rem 0 0;
   }
+
+  legend {
+    font-size: .8em;
+    padding: 2em 0 1.5em;
+  }
+
+  fieldset:nth-of-type(1) {
+    input {
+      display: none;
+    }
+
+    label {
+      padding: 0 .75em;
+      transition: .3s color;
+      display: inline-block;
+      color: var(--color-decor);
+
+      &:hover {
+        color: #666;
+      }
+    }
+
+    input:checked + label {
+      font-weight: 600;
+      color: var(--color-text);
+    }
+  }
+
+  fieldset:nth-of-type(2) {
+    input {
+      display: none;
+    }
+
+    label {
+      width: 2em;
+      height: 2em;
+      display: inline-block;
+      margin: 0 1em;
+      outline-offset: 4px;
+
+      &:nth-of-type(1) {
+        background-color: #53e3a6;
+      }
+
+      &:nth-of-type(2) {
+        background-color: #2986b3;
+      }
+
+      &:nth-of-type(3) {
+        background-color: #000;
+      }
+    }
+
+    input:checked + label {
+      outline: 3px solid var(--color-window-buttons);
+    }
+  }
+
+  input[type=submit] {
+    margin-top: 1.5em;
+  }
 }
 
 .header {
@@ -70,7 +137,7 @@
       overflow: auto;
     }
 
-    ul {
+    & > ul {
       display: block;
 
       & > li {
@@ -119,21 +186,34 @@
     color: var(--color-text-alt);
     background-color: var(--color-selected);
   }
-
 }
 
 .submenu {
   position: absolute;
   right: 4px;
   top: 2.1em;
-  width: 8em;
-  padding: .5em;
+  padding: .75em;
   background-color: var(--color-window-content);
   border-bottom: 1px solid var(--color-window-border-bottom);
   border-radius: .5em;
+  display: flex;
+  flex-direction: column;
 
-  & > li > span {
+  & > li > span,
+  & > li > a {
+    display: block;
+    color: var(--color-text);
+    padding: .5em;
+    margin: .25em;
+    white-space: nowrap;
     text-decoration: none;
+    transition: .3s background, .3s color;
+    border-radius: .5em;
+
+    &:hover {
+      color: var(--color-text-alt);
+      background-color: var(--color-selected);
+    }
   }
 }