1 files changed, 49 insertions, 2 deletions
diff --git a/styles/Main.module.scss b/styles/Main.module.scss
index 7c3f9bc..3f0230c 100644
--- a/styles/Main.module.scss
+++ b/styles/Main.module.scss
@@ -3,6 +3,7 @@
   height: 100vh;
   background: var(--color-bg);
   background: linear-gradient(to bottom right, var(--color-bg) 0%, var(--color-bg-alt) 100%);
+  position: relative;
 }
 
 .icon {
@@ -24,7 +25,7 @@
   }
 
   &:focus p {
-    background-color: var(--color-glass);
+    background-color: var(--color-selected);
   }
 }
 
@@ -41,12 +42,15 @@
 
   input[type=email],
   input[type=password]  {
+    color: var(--color-text-alt);
+    background: var(--color-window-content);
     padding: .5em;
     margin: .5em 0;
     border: 1px dashed var(--color-decor);
     border-radius: .5px;
   }
-  .error {
+
+  p {
     text-align: center;
     color: var(--color-error);
     margin: 1rem 0 0;
@@ -156,3 +160,46 @@
     color: var(--color-error);
   }
 }
+
+.fixed {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.loader,
+.connection {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  flex-direction: column;
+
+  @keyframes rotating {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  svg {
+    font-size: 600%;
+    color: #ccc;
+  }
+
+  p {
+    padding-top: 1em;
+    color: #ccc;
+    font-weight: 600;
+  }
+}
+
+.loader {
+  svg {
+    animation: rotating 1s linear infinite;
+  }
+}