4 files changed, 164 insertions, 7 deletions
diff --git a/styles/Main.module.scss b/styles/Main.module.scss
new file mode 100644
index 0000000..15be72a
--- /dev/null
+++ b/styles/Main.module.scss
@@ -0,0 +1,125 @@
+.icon {
+  text-decoration: none;
+  display: inline-block;
+  width: 4em;
+  cursor: pointer;
+
+  img {
+    width: 4em;
+  }
+
+  p {
+    padding-top: .5em;
+    text-align: center;
+    color: #333;
+  }
+}
+
+.userForm {
+  label,
+  & {
+    display: flex;
+    flex-flow: column;
+  }
+
+  label > span {
+    font-weight: 600;
+  }
+
+  input[type=email],
+  input[type=password]  {
+    padding: .5em;
+    margin: .5em 0;
+    border: 1px solid #ccc;
+    border-radius: .25px;
+  }
+  .error {
+    text-align: center;
+    color: brown;
+    margin: 1rem 0 0;
+  }
+}
+
+.header {
+  height: 2em;
+  padding: 0.5rem;
+  background-color: rgba(255, 255, 255, 0.4);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+
+  nav {
+    display: flex;
+
+    & > ul:first-of-type {
+      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;
+    }
+  }
+}
+
+.user {
+  font-weight: 600;
+  cursor: pointer;
+  position: relative;
+
+}
+
+.submenu {
+  position: absolute;
+  right: 4px;
+  top: 2.1em;
+  width: 10em;
+  padding: .5em;
+  background-color: rgba(255, 255, 255, .9);
+  border: 1px solid rgba(255, 255, 255, .5);
+
+  & > li {
+    margin: 0;
+    padding:.5em;
+    width: 100%;
+    line-height: em;
+
+    &:hover {
+      background-color: #ddd;
+    }
+  }
+}
+
+.verify {
+  & > form {
+    padding: .5em 0;
+
+    & > input {
+      padding: .75em;
+      border: 1px dashed #333;
+      border-radius: .5em;
+    }
+  }
+
+  p {
+    line-height: 1.33;
+    padding: .5em 0;
+  }
+
+  .email {
+    color: blue;
+    cursor: pointer;
+  }
+  .error {
+    color: brown;
+  }
+}
diff --git a/styles/_animations.scss b/styles/_animations.scss
deleted file mode 100644
index b195c60..0000000
--- a/styles/_animations.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@keyframes fade-in {
-  from {opacity: 0;}
-  to {opacity: 1;}
-}
diff --git a/styles/global.scss b/styles/global.scss
new file mode 100644
index 0000000..222bc44
--- /dev/null
+++ b/styles/global.scss
@@ -0,0 +1,39 @@
+@import "reset";
+@import "window";
+
+main {
+  position: fixed;
+  top: 2em;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+body {
+  margin: 0;
+  color: #222;
+  height: 100vh;
+  overflow: hidden;
+
+  background: #50a3a2;
+  background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
+  background: -moz-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
+  background: -o-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
+  background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
+
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, Noto Sans, sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+}
+
+textarea, input {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, Noto Sans, sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+}
+
+.container {
+  margin: 1.5rem auto;
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
diff --git a/styles/styles.scss b/styles/styles.scss
deleted file mode 100644
index 73ef2ee..0000000
--- a/styles/styles.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import "reset";
-@import "animations";
-@import "window";