From 90306eb15737f0c259ee744ae7043472e930b7a2 Mon Sep 17 00:00:00 2001
From: Haris Razis <dev@xrazis.com>
Date: Sun, 11 Oct 2020 22:30:15 +0300
Subject: [PATCH] =?UTF-8?q?=E2=9E=95=20Add=20signin/up=20routes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Does not forwards request / REST
---
 app.js                            |    0
 bin/www                           |    0
 package-lock.json                 |    0
 package.json                      |    0
 public/stylesheets/styles.min.css | 1330 ++++++++++++++---------------
 routes/index.js                   |   15 +-
 views/error.ejs                   |    0
 views/index.ejs                   |   15 +-
 views/login.ejs                   |    0
 views/signup.ejs                  |    0
 10 files changed, 688 insertions(+), 672 deletions(-)
 mode change 100755 => 100644 app.js
 mode change 100755 => 100644 bin/www
 mode change 100755 => 100644 package-lock.json
 mode change 100755 => 100644 package.json
 mode change 100755 => 100644 routes/index.js
 mode change 100755 => 100644 views/error.ejs
 mode change 100755 => 100644 views/index.ejs
 create mode 100644 views/login.ejs
 create mode 100644 views/signup.ejs

diff --git a/app.js b/app.js
old mode 100755
new mode 100644
diff --git a/bin/www b/bin/www
old mode 100755
new mode 100644
diff --git a/package-lock.json b/package-lock.json
old mode 100755
new mode 100644
diff --git a/package.json b/package.json
old mode 100755
new mode 100644
diff --git a/public/stylesheets/styles.min.css b/public/stylesheets/styles.min.css
index 4255bc1..ebe9fcf 100644
--- a/public/stylesheets/styles.min.css
+++ b/public/stylesheets/styles.min.css
@@ -1,345 +1,345 @@
 .article-clean,
 .article-dual-column {
-    color: #56585b;
-    background-color: #fff;
-    font-family: Lora, serif;
-    font-size: 14px
+  color: #56585b;
+  background-color: #fff;
+  font-family: Lora, serif;
+  font-size: 14px;
 }
 
 .article-clean .intro,
 .article-dual-column .intro {
-    font-size: 16px;
-    margin: 0 auto 30px
+  font-size: 16px;
+  margin: 0 auto 30px;
 }
 
 .article-clean .intro h1 {
-    font-size: 32px;
-    margin-bottom: 15px;
-    padding-top: 20px;
-    line-height: 1.5;
-    color: inherit;
-    margin-top: 20px
+  font-size: 32px;
+  margin-bottom: 15px;
+  padding-top: 20px;
+  line-height: 1.5;
+  color: inherit;
+  margin-top: 20px;
 }
 
 .article-clean .intro p,
 .article-dual-column .intro p {
-    color: #929292;
-    font-size: 12px
+  color: #929292;
+  font-size: 12px;
 }
 
 .article-clean .intro p .by,
 .article-dual-column .intro p .by {
-    font-style: italic
+  font-style: italic;
 }
 
 .article-clean .intro p .date,
 .article-dual-column .intro p .date {
-    text-transform: uppercase;
-    padding: 4px 0 4px 10px;
-    margin-left: 10px;
-    border-left: 1px solid #ddd
+  text-transform: uppercase;
+  padding: 4px 0 4px 10px;
+  margin-left: 10px;
+  border-left: 1px solid #ddd;
 }
 
 .article-clean .intro p a,
 .article-dual-column .intro p a {
-    color: #333;
-    text-transform: uppercase;
-    padding-left: 3px
+  color: #333;
+  text-transform: uppercase;
+  padding-left: 3px;
 }
 
 .article-clean .intro img {
-    margin-top: 20px
+  margin-top: 20px;
 }
 
 .article-clean .text p,
 .article-dual-column .text p {
-    margin-bottom: 20px;
-    line-height: 1.45
+  margin-bottom: 20px;
+  line-height: 1.45;
 }
 
 .article-clean .text h2,
 .article-dual-column .text h2 {
-    margin-top: 28px;
-    margin-bottom: 20px;
-    line-height: 1.45;
-    font-size: 16px;
-    font-weight: 700;
-    color: #333
+  margin-top: 28px;
+  margin-bottom: 20px;
+  line-height: 1.45;
+  font-size: 16px;
+  font-weight: 700;
+  color: #333;
 }
 
 .article-clean .text figure,
 .article-dual-column .text figure {
-    text-align: center;
-    margin-top: 30px;
-    margin-bottom: 20px
+  text-align: center;
+  margin-top: 30px;
+  margin-bottom: 20px;
 }
 
 .article-clean .text figure img,
 .article-dual-column .text figure img {
-    margin-bottom: 12px;
-    max-width: 100%
+  margin-bottom: 12px;
+  max-width: 100%;
 }
 
 .article-dual-column .intro h1 {
-    font-size: 32px;
-    margin-bottom: 15px;
-    padding-top: 20px;
-    line-height: 1.5;
-    color: inherit;
-    margin-top: 25px
+  font-size: 32px;
+  margin-bottom: 15px;
+  padding-top: 20px;
+  line-height: 1.5;
+  color: inherit;
+  margin-top: 25px;
 }
 
 .article-dual-column .intro img {
-    margin-top: 25px
+  margin-top: 25px;
 }
 
 .article-dual-column .toc p {
-    text-transform: uppercase;
-    font-size: 12px;
-    font-weight: 700
+  text-transform: uppercase;
+  font-size: 12px;
+  font-weight: 700;
 }
 
 .article-dual-column .toc ul {
-    padding-left: 20px;
-    font-size: 13px;
-    margin-bottom: 0
+  padding-left: 20px;
+  font-size: 13px;
+  margin-bottom: 0;
 }
 
 .article-dual-column .toc li {
-    padding: 2px 0
+  padding: 2px 0;
 }
 
 .article-dual-column .toc a {
-    color: inherit
+  color: inherit;
 }
 
 .faqHeader {
-    font-size: 27px;
-    margin: 20px
+  font-size: 27px;
+  margin: 20px;
 }
 
-.panel-heading [data-toggle=collapse]:after {
-    font-family: FontAwesome;
-    content: "\f078";
-    float: right;
-    color: #f58723;
-    font-size: 18px;
-    line-height: 22px
+.panel-heading [data-toggle="collapse"]:after {
+  font-family: FontAwesome;
+  content: "\f078";
+  float: right;
+  color: #f58723;
+  font-size: 18px;
+  line-height: 22px;
 }
 
-.panel-heading [data-toggle=collapse].collapsed:after {
-    color: #454444
+.panel-heading [data-toggle="collapse"].collapsed:after {
+  color: #454444;
 }
 
 .footer-dark {
-    padding: 50px 0;
-    color: #f0f9ff;
-    background-color: #282d32
+  padding: 50px 0;
+  color: #f0f9ff;
+  background-color: #282d32;
 }
 
 .footer-dark h3 {
-    margin-top: 0;
-    margin-bottom: 12px;
-    font-weight: 700;
-    font-size: 16px
+  margin-top: 0;
+  margin-bottom: 12px;
+  font-weight: 700;
+  font-size: 16px;
 }
 
 .footer-dark ul {
-    padding: 0;
-    list-style: none;
-    line-height: 1.6;
-    font-size: 14px;
-    margin-bottom: 0
+  padding: 0;
+  list-style: none;
+  line-height: 1.6;
+  font-size: 14px;
+  margin-bottom: 0;
 }
 
 .footer-dark ul a {
-    color: inherit;
-    text-decoration: none;
-    opacity: .6
+  color: inherit;
+  text-decoration: none;
+  opacity: 0.6;
 }
 
 .footer-dark ul a:hover {
-    opacity: .8
+  opacity: 0.8;
 }
 
 .footer-dark .item.text {
-    margin-bottom: 36px
+  margin-bottom: 36px;
 }
 
 .footer-dark .item.text p {
-    opacity: .6;
-    margin-bottom: 0
+  opacity: 0.6;
+  margin-bottom: 0;
 }
 
 .footer-dark .item.social,
 .highlight-blue .buttons {
-    text-align: center
+  text-align: center;
 }
 
-@media (max-width:991px) {
-    .footer-dark .item.social {
-        text-align: center;
-        margin-top: 20px
-    }
+@media (max-width: 991px) {
+  .footer-dark .item.social {
+    text-align: center;
+    margin-top: 20px;
+  }
 }
 
-.footer-dark .item.social>a {
-    font-size: 20px;
-    width: 36px;
-    height: 36px;
-    line-height: 36px;
-    display: inline-block;
-    text-align: center;
-    border-radius: 50%;
-    box-shadow: 0 0 0 1px rgba(255, 255, 255, .4);
-    margin: 0 8px;
-    color: #fff;
-    opacity: .75
+.footer-dark .item.social > a {
+  font-size: 20px;
+  width: 36px;
+  height: 36px;
+  line-height: 36px;
+  display: inline-block;
+  text-align: center;
+  border-radius: 50%;
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
+  margin: 0 8px;
+  color: #fff;
+  opacity: 0.75;
 }
 
-.footer-dark .item.social>a:hover {
-    opacity: .9
+.footer-dark .item.social > a:hover {
+  opacity: 0.9;
 }
 
 .footer-dark .copyright {
-    text-align: center;
-    padding-top: 24px;
-    opacity: .3;
-    font-size: 13px;
-    margin-bottom: 0
+  text-align: center;
+  padding-top: 24px;
+  opacity: 0.3;
+  font-size: 13px;
+  margin-bottom: 0;
 }
 
 .highlight-blue {
-    color: #fff;
-    background-color: #1e6add;
-    padding: 50px 0
+  color: #fff;
+  background-color: #1e6add;
+  padding: 50px 0;
 }
 
 .highlight-blue p {
-    color: #c4d5ef;
-    line-height: 1.5
+  color: #c4d5ef;
+  line-height: 1.5;
 }
 
 .highlight-blue h2 {
-    font-weight: 400;
-    margin-bottom: 25px;
-    line-height: 1.5;
-    padding-top: 0;
-    margin-top: 0;
-    color: inherit
+  font-weight: 400;
+  margin-bottom: 25px;
+  line-height: 1.5;
+  padding-top: 0;
+  margin-top: 0;
+  color: inherit;
 }
 
 .highlight-blue .intro {
-    font-size: 16px;
-    max-width: 500px;
-    margin: 0 auto 25px
+  font-size: 16px;
+  max-width: 500px;
+  margin: 0 auto 25px;
 }
 
 .highlight-blue .buttons .btn {
-    padding: 16px 32px;
-    margin: 6px;
-    border: none;
-    background: 0 0;
-    box-shadow: none;
-    text-shadow: none;
-    opacity: .9;
-    text-transform: uppercase;
-    font-weight: 700;
-    font-size: 13px;
-    letter-spacing: .4px;
-    line-height: 1
+  padding: 16px 32px;
+  margin: 6px;
+  border: none;
+  background: 0 0;
+  box-shadow: none;
+  text-shadow: none;
+  opacity: 0.9;
+  text-transform: uppercase;
+  font-weight: 700;
+  font-size: 13px;
+  letter-spacing: 0.4px;
+  line-height: 1;
 }
 
 .highlight-blue .buttons .btn:hover {
-    opacity: 1
+  opacity: 1;
 }
 
 .highlight-blue .buttons .btn:active {
-    transform: translateY(1px)
+  transform: translateY(1px);
 }
 
 .highlight-blue .buttons .btn-primary,
 .highlight-blue .buttons .btn-primary:active {
-    border: 2px solid rgba(255, 255, 255, .7);
-    border-radius: 6px;
-    color: #ebeff1;
-    box-shadow: none;
-    text-shadow: none;
-    padding: 14px 24px;
-    background: 0 0;
-    transition: background-color .25s
+  border: 2px solid rgba(255, 255, 255, 0.7);
+  border-radius: 6px;
+  color: #ebeff1;
+  box-shadow: none;
+  text-shadow: none;
+  padding: 14px 24px;
+  background: 0 0;
+  transition: background-color 0.25s;
 }
 
 .navigation-clean-button,
 .navigation-clean-search {
-    background: transparent !important;
-    padding-top: .75rem;
-    padding-bottom: .75rem;
-    color: #333;
-    border-radius: 0;
-    box-shadow: none;
-    border: none;
-    margin-bottom: 0
+  background: transparent !important;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  color: #333;
+  border-radius: 0;
+  box-shadow: none;
+  border: none;
+  margin-bottom: 0;
 }
 
 .navigation-clean-button .navbar-brand,
 .navigation-clean-search .navbar-brand {
-    font-weight: 700;
-    color: inherit
+  font-weight: 700;
+  color: inherit;
 }
 
 .navigation-clean-button .navbar-brand:hover,
 .navigation-clean-search .navbar-brand:hover {
-    color: #222
+  color: #222;
 }
 
 .navigation-clean-button.navbar-dark .navbar-brand:hover {
-    color: #f0f0f0
+  color: #f0f0f0;
 }
 
 .navigation-clean-button .navbar-brand img {
-    height: 100%;
-    display: inline-block;
-    margin-right: 10px;
-    width: auto
+  height: 100%;
+  display: inline-block;
+  margin-right: 10px;
+  width: auto;
 }
 
 .navigation-clean-button .navbar-toggler,
 .navigation-clean-search .navbar-toggler {
-    border-color: #ddd;
-    color: #888
+  border-color: #ddd;
+  color: #888;
 }
 
 .navigation-clean-button .navbar-toggler:focus,
 .navigation-clean-button .navbar-toggler:hover,
 .navigation-clean-search .navbar-toggler:focus,
 .navigation-clean-search .navbar-toggler:hover {
-    background: 0 0
+  background: 0 0;
 }
 
 .navigation-clean-button.navbar-dark .navbar-toggler {
-    border-color: #555;
-    color: #eee
+  border-color: #555;
+  color: #eee;
 }
 
 .navigation-clean-button .form-inline,
 .navigation-clean-button .navbar-collapse,
 .navigation-clean-search .form-inline,
 .navigation-clean-search .navbar-collapse {
-    border-top-color: #ddd
+  border-top-color: #ddd;
 }
 
 .navigation-clean-button.navbar-dark .form-inline,
 .navigation-clean-button.navbar-dark .navbar-collapse {
-    border-top-color: #333
+  border-top-color: #333;
 }
 
 .navigation-clean-button .navbar-nav a.active,
-.navigation-clean-button .navbar-nav>.show>a,
+.navigation-clean-button .navbar-nav > .show > a,
 .navigation-clean-search .navbar-nav a.active,
-.navigation-clean-search .navbar-nav>.show>a {
-    background: 0 0;
-    box-shadow: none
+.navigation-clean-search .navbar-nav > .show > a {
+  background: 0 0;
+  box-shadow: none;
 }
 
 .navigation-clean-button.navbar-dark .navbar-nav a.active,
@@ -351,807 +351,807 @@
 .navigation-clean-search.navbar-light .navbar-nav a.active,
 .navigation-clean-search.navbar-light .navbar-nav a.active:focus,
 .navigation-clean-search.navbar-light .navbar-nav a.active:hover {
-    color: #8f8f8f;
-    box-shadow: none;
-    background: 0 0;
-    pointer-events: none
+  color: #8f8f8f;
+  box-shadow: none;
+  background: 0 0;
+  pointer-events: none;
 }
 
 .navigation-clean-button.navbar .navbar-nav .nav-link,
 .navigation-clean-search.navbar .navbar-nav .nav-link {
-    padding-left: 18px;
-    padding-right: 18px
+  padding-left: 18px;
+  padding-right: 18px;
 }
 
 .navigation-clean-button.navbar-light .navbar-nav .nav-link,
 .navigation-clean-search.navbar-light .navbar-nav .nav-link {
-    color: #465765
+  color: #465765;
 }
 
 .navigation-clean-button.navbar-light .navbar-nav .nav-link:focus,
 .navigation-clean-button.navbar-light .navbar-nav .nav-link:hover,
 .navigation-clean-search.navbar-light .navbar-nav .nav-link:focus,
 .navigation-clean-search.navbar-light .navbar-nav .nav-link:hover {
-    color: #37434d !important;
-    background-color: transparent
+  color: #37434d !important;
+  background-color: transparent;
 }
 
-.navigation-clean-button .navbar-nav>li>.dropdown-menu {
-    margin-top: -5px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
-    background-color: #fff;
-    border-radius: 2px
+.navigation-clean-button .navbar-nav > li > .dropdown-menu {
+  margin-top: -5px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  background-color: #fff;
+  border-radius: 2px;
 }
 
 .navigation-clean-button .dropdown-menu .dropdown-item,
 .navigation-clean-button .dropdown-menu .dropdown-item:focus {
-    line-height: 2;
-    font-size: 14px;
-    color: #37434d
+  line-height: 2;
+  font-size: 14px;
+  color: #37434d;
 }
 
 .navigation-clean-button .dropdown-menu .dropdown-item:focus,
 .navigation-clean-button .dropdown-menu .dropdown-item:hover {
-    background: #eee;
-    color: inherit
+  background: #eee;
+  color: inherit;
 }
 
 .navigation-clean-button.navbar-dark {
-    background-color: #1f2021;
-    color: #fff
+  background-color: #1f2021;
+  color: #fff;
 }
 
 .navigation-clean-button.navbar-dark .actions .login,
 .navigation-clean-button.navbar-dark .navbar-nav .nav-link {
-    color: #dfe8ee
+  color: #dfe8ee;
 }
 
 .navigation-clean-button.navbar-dark .navbar-nav .nav-link:focus,
 .navigation-clean-button.navbar-dark .navbar-nav .nav-link:hover {
-    color: #fff !important;
-    background-color: transparent
+  color: #fff !important;
+  background-color: transparent;
 }
 
-.navigation-clean-button.navbar-dark .navbar-nav>li>.dropdown-menu {
-    background-color: #1f2021
+.navigation-clean-button.navbar-dark .navbar-nav > li > .dropdown-menu {
+  background-color: #1f2021;
 }
 
 .navigation-clean-button.navbar-dark .dropdown-menu .dropdown-item,
 .navigation-clean-button.navbar-dark .dropdown-menu .dropdown-item:focus {
-    color: #f2f5f8
+  color: #f2f5f8;
 }
 
 .navigation-clean-button.navbar-dark .dropdown-menu .dropdown-item:focus,
 .navigation-clean-button.navbar-dark .dropdown-menu .dropdown-item:hover {
-    background: #363739
+  background: #363739;
 }
 
 .navigation-clean-button .actions .login {
-    margin-right: 1rem;
-    text-decoration: none;
-    color: #465765
+  margin-right: 1rem;
+  text-decoration: none;
+  color: #465765;
 }
 
 .navigation-clean-button.navbar-dark .actions .login:hover {
-    color: #fff
+  color: #fff;
 }
 
 .navigation-clean-button .navbar-text .action-button,
 .navigation-clean-button .navbar-text .action-button:active,
 .navigation-clean-button .navbar-text .action-button:hover {
-    background: #56c6c6;
-    border-radius: 20px;
-    font-size: inherit;
-    color: #fff;
-    box-shadow: none;
-    border: none;
-    text-shadow: none;
-    padding: .5rem 1rem;
-    transition: background-color .25s;
-    font-size: inherit
+  background: #56c6c6;
+  border-radius: 20px;
+  font-size: inherit;
+  color: #fff;
+  box-shadow: none;
+  border: none;
+  text-shadow: none;
+  padding: 0.5rem 1rem;
+  transition: background-color 0.25s;
+  font-size: inherit;
 }
 
 .navigation-clean-button .navbar-text .action-button:hover,
 .navigation-clean-search .action-button:focus,
 .navigation-clean-search .action-button:hover {
-    background: #66d7d7
+  background: #66d7d7;
 }
 
 .navigation-clean-button.navbar-dark .action-button,
 .navigation-clean-button.navbar-dark .action-button:active {
-    background: #208f8f
+  background: #208f8f;
 }
 
 .navigation-clean-button.navbar-dark .action-button:hover {
-    background: #269d9d
+  background: #269d9d;
 }
 
 .navigation-clean-button .action-button:active,
 .navigation-clean-search .action-button {
-    background: #56c6c6;
-    border-radius: 20px;
-    font-size: inherit;
-    color: #fff !important;
-    box-shadow: none;
-    border: none;
-    text-shadow: none;
-    padding: 8px 20px;
-    transition: background-color .25s
+  background: #56c6c6;
+  border-radius: 20px;
+  font-size: inherit;
+  color: #fff !important;
+  box-shadow: none;
+  border: none;
+  text-shadow: none;
+  padding: 8px 20px;
+  transition: background-color 0.25s;
 }
 
 .navigation-clean-search .form-inline label {
-    color: #ccc
+  color: #ccc;
 }
 
 .navigation-clean-search .form-inline .search-field {
-    background: 0 0;
-    border: none;
-    border-bottom: 1px solid transparent;
-    border-radius: 0;
-    color: #ccc;
-    box-shadow: none;
-    color: inherit;
-    transition: border-bottom-color .3s
-}
-
-@media (max-width:767px) {
-    .article-dual-column .toc {
-        border: 1px solid #d3d3d3;
-        padding: 20px 0 15px;
-        margin-bottom: 20px;
-        border-width: 1px 0
-    }
-
-    .footer-dark .item:not(.social) {
-        text-align: center;
-        padding-bottom: 20px
-    }
-
-    .footer-dark .item.text {
-        margin-bottom: 0
-    }
+  background: 0 0;
+  border: none;
+  border-bottom: 1px solid transparent;
+  border-radius: 0;
+  color: #ccc;
+  box-shadow: none;
+  color: inherit;
+  transition: border-bottom-color 0.3s;
+}
+
+@media (max-width: 767px) {
+  .article-dual-column .toc {
+    border: 1px solid #d3d3d3;
+    padding: 20px 0 15px;
+    margin-bottom: 20px;
+    border-width: 1px 0;
+  }
 
-    .navigation-clean-button .navbar-nav .show .dropdown-menu {
-        box-shadow: none
-    }
+  .footer-dark .item:not(.social) {
+    text-align: center;
+    padding-bottom: 20px;
+  }
 
-    .navigation-clean-button .navbar-nav .show .dropdown-menu .dropdown-item {
-        color: #37434d;
-        padding-top: 12px;
-        padding-bottom: 12px;
-        line-height: 1
-    }
+  .footer-dark .item.text {
+    margin-bottom: 0;
+  }
 
-    .navigation-clean-button.navbar-dark .navbar-nav .show .dropdown-menu .dropdown-item {
-        color: #fff
-    }
+  .navigation-clean-button .navbar-nav .show .dropdown-menu {
+    box-shadow: none;
+  }
+
+  .navigation-clean-button .navbar-nav .show .dropdown-menu .dropdown-item {
+    color: #37434d;
+    padding-top: 12px;
+    padding-bottom: 12px;
+    line-height: 1;
+  }
+
+  .navigation-clean-button.navbar-dark
+    .navbar-nav
+    .show
+    .dropdown-menu
+    .dropdown-item {
+    color: #fff;
+  }
 
-    .navigation-clean-search .form-inline .search-field {
-        display: inline-block;
-        width: 80%
-    }
+  .navigation-clean-search .form-inline .search-field {
+    display: inline-block;
+    width: 80%;
+  }
 }
 
 .navigation-clean-search .form-inline .search-field:focus {
-    border-bottom: 1px solid #ccc
+  border-bottom: 1px solid #ccc;
 }
 
 .navbar.fixed-top.off-canvas {
-    bottom: 0;
-    right: auto;
-    transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
-    -webkit-transform: translateX(-100%);
-    transform: translateX(-100%);
-    z-index: 999999999999;
-    width: 100%
+  bottom: 0;
+  right: auto;
+  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
+  -webkit-transform: translateX(-100%);
+  transform: translateX(-100%);
+  z-index: 999999999999;
+  width: 100%;
 }
 
 .navbar.fixed-top.off-canvas .brand-line,
 .navbar.fixed-top.off-canvas .nav {
-    width: 100%
+  width: 100%;
 }
 
 .nav.navbar-nav.drawer-menu {
-    overflow-y: auto;
-    flex: 1 1 auto;
-    height: 0;
-    -ms-flex-wrap: nowrap;
-    flex-wrap: nowrap
+  overflow-y: auto;
+  flex: 1 1 auto;
+  height: 0;
+  -ms-flex-wrap: nowrap;
+  flex-wrap: nowrap;
 }
 
-.navbar.fixed-top.off-canvas>div[class*=container-] {
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
-    padding-right: 0;
-    padding-left: 0;
-    height: 100%;
-    align-content: space-between
+.navbar.fixed-top.off-canvas > div[class*="container-"] {
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  padding-right: 0;
+  padding-left: 0;
+  height: 100%;
+  align-content: space-between;
 }
 
 .navbar.fixed-top.off-canvas .navbar-nav .nav-link {
-    padding-right: 0;
-    padding-left: 0
+  padding-right: 0;
+  padding-left: 0;
 }
 
 .navbar.fixed-top.off-canvas.right-drawer,
 .navbar.fixed-top.off-canvas[data-right-drawer="1"] {
-    right: 0;
-    left: auto;
-    -webkit-transform: translateX(100%);
-    transform: translateX(100%)
+  right: 0;
+  left: auto;
+  -webkit-transform: translateX(100%);
+  transform: translateX(100%);
 }
 
 .navbar.fixed-top.off-canvas.navbar-expand,
 .navbar.fixed-top.off-canvas.open,
 .navbar.fixed-top.off-canvas[data-open-drawer="1"] {
-    -webkit-transform: translateX(0);
-    transform: translateX(0)
+  -webkit-transform: translateX(0);
+  transform: translateX(0);
 }
 
 #sidebar.active .CTAs,
 #sidebar.active .sidebar-header h3,
 .navbar.fixed-top.off-canvas.navbar-expand .drawer-knob,
-.navbar.fixed-top.off-canvas.navbar-expand button[data-dismiss=drawer],
+.navbar.fixed-top.off-canvas.navbar-expand button[data-dismiss="drawer"],
 .navbar.fixed-top.off-canvas.open .drawer-knob,
 .navbar.fixed-top.off-canvas[data-open-drawer="1"] .drawer-knob {
-    display: none
+  display: none;
 }
 
 .navbar.fixed-top.off-canvas .drawer-knob {
-    position: absolute;
-    top: 10px;
-    right: -36px
+  position: absolute;
+  top: 10px;
+  right: -36px;
 }
 
-@media (min-width:576px) {
-    .navbar.fixed-top.off-canvas.navbar-expand-sm {
-        -webkit-transform: translateX(0);
-        transform: translateX(0)
-    }
+@media (min-width: 576px) {
+  .navbar.fixed-top.off-canvas.navbar-expand-sm {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
 
-    .navbar.fixed-top.off-canvas.navbar-expand-sm .drawer-knob,
-    .navbar.fixed-top.off-canvas.navbar-expand-sm button[data-dismiss=drawer] {
-        display: none
-    }
+  .navbar.fixed-top.off-canvas.navbar-expand-sm .drawer-knob,
+  .navbar.fixed-top.off-canvas.navbar-expand-sm button[data-dismiss="drawer"] {
+    display: none;
+  }
 
-    .navbar.fixed-top.off-canvas {
-        width: 280px
-    }
+  .navbar.fixed-top.off-canvas {
+    width: 280px;
+  }
 }
 
-@media (min-width:768px) {
-
-    .article-clean .text p,
-    .article-dual-column .text p {
-        font-size: 16px
-    }
+@media (min-width: 768px) {
+  .article-clean .text p,
+  .article-dual-column .text p {
+    font-size: 16px;
+  }
 
-    .article-clean .text h2,
-    .article-dual-column .text h2 {
-        font-size: 20px
-    }
+  .article-clean .text h2,
+  .article-dual-column .text h2 {
+    font-size: 20px;
+  }
 
-    .navigation-clean-button,
-    .navigation-clean-search {
-        padding-top: 1rem;
-        padding-bottom: 1rem
-    }
+  .navigation-clean-button,
+  .navigation-clean-search {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
 
-    .navbar.fixed-top.off-canvas.navbar-expand-md {
-        -webkit-transform: translateX(0);
-        transform: translateX(0)
-    }
+  .navbar.fixed-top.off-canvas.navbar-expand-md {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
 
-    .navbar.fixed-top.off-canvas.navbar-expand-md .drawer-knob,
-    .navbar.fixed-top.off-canvas.navbar-expand-md button[data-dismiss=drawer] {
-        display: none
-    }
+  .navbar.fixed-top.off-canvas.navbar-expand-md .drawer-knob,
+  .navbar.fixed-top.off-canvas.navbar-expand-md button[data-dismiss="drawer"] {
+    display: none;
+  }
 
-    .navbar.fixed-top.off-canvas {
-        width: 220px
-    }
+  .navbar.fixed-top.off-canvas {
+    width: 220px;
+  }
 }
 
-.drawer-push.drawer-expand>.drawer-site,
-.drawer-push.open>.drawer-site {
-    margin-left: 100%
+.drawer-push.drawer-expand > .drawer-site,
+.drawer-push.open > .drawer-site {
+  margin-left: 100%;
 }
 
-@media (min-width:576px) {
-
-    .drawer-push.drawer-expand-sm>.drawer-site,
-    .drawer-push.drawer-expand>.drawer-site,
-    .drawer-push.open>.drawer-site {
-        margin-left: 280px
-    }
+@media (min-width: 576px) {
+  .drawer-push.drawer-expand-sm > .drawer-site,
+  .drawer-push.drawer-expand > .drawer-site,
+  .drawer-push.open > .drawer-site {
+    margin-left: 280px;
+  }
 }
 
-@media (min-width:768px) {
-
-    .drawer-push.drawer-expand-md>.drawer-site,
-    .drawer-push.drawer-expand-sm>.drawer-site,
-    .drawer-push.drawer-expand>.drawer-site,
-    .drawer-push.open>.drawer-site {
-        margin-left: 220px
-    }
+@media (min-width: 768px) {
+  .drawer-push.drawer-expand-md > .drawer-site,
+  .drawer-push.drawer-expand-sm > .drawer-site,
+  .drawer-push.drawer-expand > .drawer-site,
+  .drawer-push.open > .drawer-site {
+    margin-left: 220px;
+  }
 }
 
 .drawer-slide {
-    position: relative;
-    overflow-x: hidden
+  position: relative;
+  overflow-x: hidden;
 }
 
-.drawer-slide>.drawer-site {
-    transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out
+.drawer-slide > .drawer-site {
+  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
 }
 
-.drawer-slide.open>.drawer-site {
-    -webkit-transform: translateX(100%);
-    transform: translateX(100%)
+.drawer-slide.open > .drawer-site {
+  -webkit-transform: translateX(100%);
+  transform: translateX(100%);
 }
 
-@media (min-width:576px) {
-    .drawer-slide.open>.drawer-site {
-        -webkit-transform: translateX(280px);
-        transform: translateX(280px)
-    }
+@media (min-width: 576px) {
+  .drawer-slide.open > .drawer-site {
+    -webkit-transform: translateX(280px);
+    transform: translateX(280px);
+  }
 }
 
-@media (min-width:768px) {
-    .drawer-slide.open>.drawer-site {
-        -webkit-transform: translateX(220px);
-        transform: translateX(220px)
-    }
+@media (min-width: 768px) {
+  .drawer-slide.open > .drawer-site {
+    -webkit-transform: translateX(220px);
+    transform: translateX(220px);
+  }
 }
 
-@media (min-width:992px) {
-    .navbar.fixed-top.off-canvas.navbar-expand-lg {
-        -webkit-transform: translateX(0);
-        transform: translateX(0)
-    }
+@media (min-width: 992px) {
+  .navbar.fixed-top.off-canvas.navbar-expand-lg {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
 
-    .navbar.fixed-top.off-canvas.navbar-expand-lg .drawer-knob,
-    .navbar.fixed-top.off-canvas.navbar-expand-lg button[data-dismiss=drawer] {
-        display: none
-    }
+  .navbar.fixed-top.off-canvas.navbar-expand-lg .drawer-knob,
+  .navbar.fixed-top.off-canvas.navbar-expand-lg button[data-dismiss="drawer"] {
+    display: none;
+  }
 
-    .navbar.fixed-top.off-canvas {
-        width: 220px
-    }
+  .navbar.fixed-top.off-canvas {
+    width: 220px;
+  }
 
-    .drawer-push.drawer-expand-lg>.drawer-site,
-    .drawer-push.drawer-expand-md>.drawer-site,
-    .drawer-push.drawer-expand-sm>.drawer-site,
-    .drawer-push.drawer-expand>.drawer-site,
-    .drawer-push.open>.drawer-site {
-        margin-left: 220px
-    }
+  .drawer-push.drawer-expand-lg > .drawer-site,
+  .drawer-push.drawer-expand-md > .drawer-site,
+  .drawer-push.drawer-expand-sm > .drawer-site,
+  .drawer-push.drawer-expand > .drawer-site,
+  .drawer-push.open > .drawer-site {
+    margin-left: 220px;
+  }
 
-    .drawer-slide.open>.drawer-site {
-        -webkit-transform: translateX(220px);
-        transform: translateX(220px)
-    }
+  .drawer-slide.open > .drawer-site {
+    -webkit-transform: translateX(220px);
+    transform: translateX(220px);
+  }
 }
 
-@media (min-width:1200px) {
-    .navbar.fixed-top.off-canvas.navbar-expand-xl {
-        -webkit-transform: translateX(0);
-        transform: translateX(0)
-    }
+@media (min-width: 1200px) {
+  .navbar.fixed-top.off-canvas.navbar-expand-xl {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
 
-    .navbar.fixed-top.off-canvas.navbar-expand-xl .drawer-knob,
-    .navbar.fixed-top.off-canvas.navbar-expand-xl button[data-dismiss=drawer] {
-        display: none
-    }
+  .navbar.fixed-top.off-canvas.navbar-expand-xl .drawer-knob,
+  .navbar.fixed-top.off-canvas.navbar-expand-xl button[data-dismiss="drawer"] {
+    display: none;
+  }
 
-    .navbar.fixed-top.off-canvas {
-        width: 260px
-    }
+  .navbar.fixed-top.off-canvas {
+    width: 260px;
+  }
 
-    .drawer-push.drawer-expand-lg>.drawer-site,
-    .drawer-push.drawer-expand-md>.drawer-site,
-    .drawer-push.drawer-expand-sm>.drawer-site,
-    .drawer-push.drawer-expand-xl>.drawer-site,
-    .drawer-push.drawer-expand>.drawer-site,
-    .drawer-push.open>.drawer-site {
-        margin-left: 260px
-    }
+  .drawer-push.drawer-expand-lg > .drawer-site,
+  .drawer-push.drawer-expand-md > .drawer-site,
+  .drawer-push.drawer-expand-sm > .drawer-site,
+  .drawer-push.drawer-expand-xl > .drawer-site,
+  .drawer-push.drawer-expand > .drawer-site,
+  .drawer-push.open > .drawer-site {
+    margin-left: 260px;
+  }
 
-    .drawer-slide.open>.drawer-site {
-        -webkit-transform: translateX(260px);
-        transform: translateX(260px)
-    }
+  .drawer-slide.open > .drawer-site {
+    -webkit-transform: translateX(260px);
+    transform: translateX(260px);
+  }
 }
 
-body>div.drawer-fade {
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    width: 0;
-    transition: opacity .3s linear;
-    background-color: #000;
-    opacity: 0;
-    z-index: 99999999999
+body > div.drawer-fade {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 0;
+  transition: opacity 0.3s linear;
+  background-color: #000;
+  opacity: 0;
+  z-index: 99999999999;
 }
 
-body.drawer-open>div.drawer-fade {
-    width: 100%;
-    opacity: .6
+body.drawer-open > div.drawer-fade {
+  width: 100%;
+  opacity: 0.6;
 }
 
 body {
-    font-family: Poppins, sans-serif;
-    background: #fafafa;
-    overflow-x: hidden
+  font-family: Poppins, sans-serif;
+  background: #f8f9fa;
+  overflow-x: hidden;
 }
 
 p {
-    font-family: Poppins, sans-serif;
-    font-size: 1.1em;
-    font-weight: 300;
-    line-height: 1.7em;
-    color: #999
+  font-family: Poppins, sans-serif;
+  font-size: 1.1em;
+  font-weight: 300;
+  line-height: 1.7em;
+  color: #999;
 }
 
 .line {
-    width: 100%;
-    height: 1px;
-    border-bottom: 1px dashed #ddd;
-    margin: 40px 0
+  width: 100%;
+  height: 1px;
+  border-bottom: 1px dashed #ddd;
+  margin: 40px 0;
 }
 
 #sidebar.active {
-    min-width: 80px;
-    max-width: 80px;
-    text-align: center
+  min-width: 80px;
+  max-width: 80px;
+  text-align: center;
 }
 
 #sidebar.active .sidebar-header strong {
-    display: block
+  display: block;
 }
 
 #sidebar.active ul li a {
-    padding: 20px 10px;
-    text-align: center;
-    font-size: .85em
+  padding: 20px 10px;
+  text-align: center;
+  font-size: 0.85em;
 }
 
 #sidebar.active ul li a i {
-    margin-right: 0;
-    display: block;
-    font-size: 1.8em;
-    margin-bottom: 5px
+  margin-right: 0;
+  display: block;
+  font-size: 1.8em;
+  margin-bottom: 5px;
 }
 
 #sidebar.active ul ul a {
-    padding: 10px !important
+  padding: 10px !important;
 }
 
-#sidebar.active a[aria-expanded=false]::before,
-#sidebar.active a[aria-expanded=true]::before {
-    top: auto;
-    bottom: 5px;
-    right: 50%;
-    -webkit-transform: translateX(50%);
-    -ms-transform: translateX(50%);
-    transform: translateX(50%)
+#sidebar.active a[aria-expanded="false"]::before,
+#sidebar.active a[aria-expanded="true"]::before {
+  top: auto;
+  bottom: 5px;
+  right: 50%;
+  -webkit-transform: translateX(50%);
+  -ms-transform: translateX(50%);
+  transform: translateX(50%);
 }
 
-a[aria-expanded=false]::before,
-a[aria-expanded=true]::before {
-    content: ;
-    display: block;
-    position: absolute;
-    right: 20px;
-    font-family: 'Glyphicons Halflings';
-    font-size: .6em
+a[aria-expanded="false"]::before,
+a[aria-expanded="true"]::before {
+  content: ;
+  display: block;
+  position: absolute;
+  right: 20px;
+  font-family: "Glyphicons Halflings";
+  font-size: 0.6em;
 }
 
-a[aria-expanded=true]::before {
-    content: ''
+a[aria-expanded="true"]::before {
+  content: "";
 }
 
 ul.CTAs {
-    padding: 20px
+  padding: 20px;
 }
 
 ul.CTAs a {
-    text-align: center;
-    font-size: .9em !important;
-    display: block;
-    border-radius: 5px;
-    margin-bottom: 5px
+  text-align: center;
+  font-size: 0.9em !important;
+  display: block;
+  border-radius: 5px;
+  margin-bottom: 5px;
 }
 
 a.download {
-    background: #fff;
-    color: #7386d5
+  background: #fff;
+  color: #7386d5;
 }
 
 a.article,
 a.article:hover {
-    background: #6d7fcc !important;
-    color: #fff !important
+  background: #6d7fcc !important;
+  color: #fff !important;
 }
 
 #wrapper.toggled {
-    padding-left: 250px
+  padding-left: 250px;
 }
 
 #wrapper.toggled #sidebar-wrapper {
-    width: 250px
+  width: 250px;
 }
 
 #page-content-wrapper {
-    width: 100%;
-    position: absolute;
-    padding: 15px
+  width: 100%;
+  position: absolute;
+  padding: 15px;
 }
 
 #wrapper.toggled #page-content-wrapper {
-    position: absolute;
-    margin-right: -250px
+  position: absolute;
+  margin-right: -250px;
 }
 
 #wrapper {
-    padding-left: 0;
-    -webkit-transition: .5s;
-    -moz-transition: .5s;
-    -o-transition: .5s;
-    transition: .5s
+  padding-left: 0;
+  -webkit-transition: 0.5s;
+  -moz-transition: 0.5s;
+  -o-transition: 0.5s;
+  transition: 0.5s;
 }
 
 #sidebar-wrapper {
-    z-index: 1000;
-    position: fixed;
-    left: 250px;
-    width: 0;
-    height: 100%;
-    margin-left: -250px;
-    overflow-y: auto;
-    background: #000;
-    -webkit-transition: .5s;
-    -moz-transition: .5s;
-    -o-transition: .5s;
-    transition: .5s
+  z-index: 1000;
+  position: fixed;
+  left: 250px;
+  width: 0;
+  height: 100%;
+  margin-left: -250px;
+  overflow-y: auto;
+  background: #000;
+  -webkit-transition: 0.5s;
+  -moz-transition: 0.5s;
+  -o-transition: 0.5s;
+  transition: 0.5s;
 }
 
 .sidebar-nav {
-    position: absolute;
-    top: 0;
-    width: 250px;
-    margin: 0;
-    padding: 0;
-    list-style: none
+  position: absolute;
+  top: 0;
+  width: 250px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
 
 .sidebar-nav li {
-    text-indent: 20px;
-    line-height: 40px
+  text-indent: 20px;
+  line-height: 40px;
 }
 
 .sidebar-nav li a {
-    display: block;
-    text-decoration: none;
-    color: #999
+  display: block;
+  text-decoration: none;
+  color: #999;
 }
 
 .sidebar-nav li a:hover {
-    text-decoration: none;
-    color: #fff;
-    background: rgba(255, 255, 255, .2)
+  text-decoration: none;
+  color: #fff;
+  background: rgba(255, 255, 255, 0.2);
 }
 
 .sidebar-nav li a:active,
 .sidebar-nav li a:focus {
-    text-decoration: none
+  text-decoration: none;
 }
 
-.sidebar-nav>.sidebar-brand {
-    height: 65px;
-    font-size: 18px;
-    line-height: 60px
+.sidebar-nav > .sidebar-brand {
+  height: 65px;
+  font-size: 18px;
+  line-height: 60px;
 }
 
-.sidebar-nav>.sidebar-brand a {
-    color: #999
+.sidebar-nav > .sidebar-brand a {
+  color: #999;
 }
 
-.sidebar-nav>.sidebar-brand a:hover {
-    color: #fff;
-    background: 0 0
+.sidebar-nav > .sidebar-brand a:hover {
+  color: #fff;
+  background: 0 0;
 }
 
-@media (min-width:768px) {
-    #wrapper.toggled {
-        padding-left: 0
-    }
+@media (min-width: 768px) {
+  #wrapper.toggled {
+    padding-left: 0;
+  }
 
-    #wrapper.toggled #sidebar-wrapper {
-        width: 0
-    }
+  #wrapper.toggled #sidebar-wrapper {
+    width: 0;
+  }
 
-    #page-content-wrapper {
-        padding: 20px;
-        position: relative
-    }
+  #page-content-wrapper {
+    padding: 20px;
+    position: relative;
+  }
 
-    #wrapper.toggled #page-content-wrapper {
-        position: relative;
-        margin-right: 0
-    }
+  #wrapper.toggled #page-content-wrapper {
+    position: relative;
+    margin-right: 0;
+  }
 
-    #wrapper {
-        padding-left: 250px
-    }
+  #wrapper {
+    padding-left: 250px;
+  }
 
-    #sidebar-wrapper {
-        width: 250px
-    }
+  #sidebar-wrapper {
+    width: 250px;
+  }
 }
 
 a,
 a:focus,
 a:hover {
-    color: inherit;
-    text-decoration: none;
-    transition: .3s
+  color: inherit;
+  text-decoration: none;
+  transition: 0.3s;
 }
 
 .navbar {
-    padding: 15px 10px;
-    background: #fff;
-    border: none;
-    border-radius: 0;
-    margin-bottom: 40px;
-    box-shadow: 1px 1px 3px rgba(0, 0, 0, .1)
+  padding: 15px 10px;
+  background: #fff;
+  border: none;
+  border-radius: 0;
+  margin-bottom: 40px;
+  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .navbar-btn {
-    box-shadow: none;
-    outline: 0 !important;
-    border: none
+  box-shadow: none;
+  outline: 0 !important;
+  border: none;
 }
 
 i,
 span {
-    display: inline-block
+  display: inline-block;
 }
 
 .wrapper {
-    display: flex;
-    align-items: stretch
+  display: flex;
+  align-items: stretch;
 }
 
 #sidebar {
-    min-width: 250px;
-    max-width: 250px;
-    background: #7386d5;
-    color: #fff;
-    transition: .3s
+  min-width: 250px;
+  max-width: 250px;
+  background: #7386d5;
+  color: #fff;
+  transition: 0.3s;
 }
 
 #sidebar ul li a {
-    text-align: left;
-    padding: 10px;
-    font-size: 1.1em;
-    display: block
+  text-align: left;
+  padding: 10px;
+  font-size: 1.1em;
+  display: block;
 }
 
 #sidebar .sidebar-header {
-    padding: 20px;
-    background: #6d7fcc
+  padding: 20px;
+  background: #6d7fcc;
 }
 
 #sidebar .sidebar-header strong {
-    display: none;
-    font-size: 1.8em
+  display: none;
+  font-size: 1.8em;
 }
 
 #sidebar ul.components {
-    padding: 20px 0;
-    border-bottom: 1px solid #47748b
+  padding: 20px 0;
+  border-bottom: 1px solid #47748b;
 }
 
 #sidebar ul li a:hover {
-    color: #7386d5;
-    background: #fff
+  color: #7386d5;
+  background: #fff;
 }
 
 #sidebar ul li a i {
-    margin-right: 10px
+  margin-right: 10px;
 }
 
-#sidebar ul li.active>a,
-a[aria-expanded=true] {
-    background: #6d7fcc
+#sidebar ul li.active > a,
+a[aria-expanded="true"] {
+  background: #6d7fcc;
 }
 
-a[data-toggle=collapse] {
-    position: relative
+a[data-toggle="collapse"] {
+  position: relative;
 }
 
 ul ul a {
-    font-size: .9em !important;
-    padding-left: 30px !important;
-    background: #6d7fcc
+  font-size: 0.9em !important;
+  padding-left: 30px !important;
+  background: #6d7fcc;
 }
 
 #content {
-    padding: 20px;
-    min-height: 100vh;
-    transition: .3s
-}
-
-@media (max-width:768px) {
-
-    a[aria-expanded=false]::before,
-    a[aria-expanded=true]::before {
-        top: auto;
-        bottom: 5px;
-        right: 50%;
-        -webkit-transform: translateX(50%);
-        -ms-transform: translateX(50%);
-        transform: translateX(50%)
-    }
-
-    #sidebar.active {
-        margin-left: 0 !important
-    }
-
-    #sidebar ul li a span {
-        font-size: .85em
-    }
-
-    #sidebar {
-        min-width: 80px;
-        max-width: 80px;
-        text-align: center;
-        margin-left: -80px !important
-    }
-
-    #sidebar .CTAs,
-    #sidebar .sidebar-header h3,
-    #sidebarCollapse span {
-        display: none
-    }
-
-    #sidebar .sidebar-header strong {
-        display: block
-    }
-
-    #sidebar ul li a {
-        padding: 20px 10px
-    }
-
-    #sidebar ul li a i {
-        margin-right: 0;
-        display: block;
-        font-size: 1.3em
-    }
-
-    #sidebar ul ul a {
-        padding: 10px !important
-    }
+  padding: 20px;
+  min-height: 100vh;
+  transition: 0.3s;
 }
 
-#particles-js canvas {
+@media (max-width: 768px) {
+  a[aria-expanded="false"]::before,
+  a[aria-expanded="true"]::before {
+    top: auto;
+    bottom: 5px;
+    right: 50%;
+    -webkit-transform: translateX(50%);
+    -ms-transform: translateX(50%);
+    transform: translateX(50%);
+  }
+
+  #sidebar.active {
+    margin-left: 0 !important;
+  }
+
+  #sidebar ul li a span {
+    font-size: 0.85em;
+  }
+
+  #sidebar {
+    min-width: 80px;
+    max-width: 80px;
+    text-align: center;
+    margin-left: -80px !important;
+  }
+
+  #sidebar .CTAs,
+  #sidebar .sidebar-header h3,
+  #sidebarCollapse span {
+    display: none;
+  }
+
+  #sidebar .sidebar-header strong {
     display: block;
-    vertical-align: bottom;
-    -webkit-transform: scale(1);
-    -ms-transform: scale(1);
-    transform: scale(1);
-    opacity: 1;
-    -webkit-transition: opacity .8s ease, -webkit-transform 1.4s ease;
-    transition: opacity .8s ease, transform 1.4s ease
+  }
+
+  #sidebar ul li a {
+    padding: 20px 10px;
+  }
+
+  #sidebar ul li a i {
+    margin-right: 0;
+    display: block;
+    font-size: 1.3em;
+  }
+
+  #sidebar ul ul a {
+    padding: 10px !important;
+  }
+}
+
+#particles-js canvas {
+  display: block;
+  vertical-align: bottom;
+  -webkit-transform: scale(1);
+  -ms-transform: scale(1);
+  transform: scale(1);
+  opacity: 1;
+  -webkit-transition: opacity 0.8s ease, -webkit-transform 1.4s ease;
+  transition: opacity 0.8s ease, transform 1.4s ease;
 }
 
 #particles-js {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    z-index: -10;
-    top: 0;
-    left: 0
-}
\ No newline at end of file
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: -10;
+  top: 0;
+  left: 0;
+}
diff --git a/routes/index.js b/routes/index.js
old mode 100755
new mode 100644
index 67c0a97..093e34a
--- a/routes/index.js
+++ b/routes/index.js
@@ -1,16 +1,25 @@
 var express = require('express');
 var router = express.Router();
 
-router.get('/', (req, res, next) => {
+router.get('/', (req, res) => {
   res.render('index');
 });
 
-router.get('/documentation', (req, res, next) => {
+router.get('/documentation', (req, res) => {
   res.render('documentation');
 });
 
-router.get('/faq', (req, res, next) => {
+router.get('/faq', (req, res) => {
   res.render('faq');
 });
 
+router.get('/login', (req, res) => {
+  res.send('login');
+});
+
+router.get('/signup', (req, res) => {
+  res.send('signup');
+});
+
+
 module.exports = router;
\ No newline at end of file
diff --git a/views/error.ejs b/views/error.ejs
old mode 100755
new mode 100644
diff --git a/views/index.ejs b/views/index.ejs
old mode 100755
new mode 100644
index 342cdfc..31d90f8
--- a/views/index.ejs
+++ b/views/index.ejs
@@ -1,18 +1,25 @@
 <%- include("partials/header.ejs") %>
 
-<header style="height: 90vh; background-color: #f8f9fa;">
+<header class="container-fluid mt-5 p-5">
   <div id="particles-js"></div>
-  <div class="container mb-5 mt-4">
-    <div class="col-sm-12 mt-5">
+  <div class="row no-gutters mb-5">
+      <div class="col-lg-12 my-auto order-lg-1 showcase-text text-center" style="margin-bottom: 5rem !important;">
       <h1><%= t('welcome') %></h1>
       <p style="font-size: 20px;"><%= t('welcome_text') %></p>
       <a href="/documentation#getStarted" class="btn btn-primary rounded-pill btn-md mt-1" role="button"
         data-bs-hover-animate="pulse" style="color: rgb(255,255,255);">Get Started!</a>
+      </div>
+      <div class="col-lg-12 order-lg-2 text-white" style="background: url(/images/undraw_content_team_3epn.svg) center / contain; height: 35vh; background-repeat:
+        no-repeat;"><span></span></div>
+    </div>
+  <!-- <div class="container mb-5 mt-4">
+    <div class="col-sm-12 mt-5">
+      
     </div>
     <div class="container col-sm-12 col-lg-6 mt-5">
       <img class="img-fluid float-right" src="/images/undraw_content_team_3epn.svg" alt="">
     </div>
-  </div>
+  </div> -->
 </header>
 
 <section class="features-icons bg-light text-center" id="features">
diff --git a/views/login.ejs b/views/login.ejs
new file mode 100644
index 0000000..e69de29
diff --git a/views/signup.ejs b/views/signup.ejs
new file mode 100644
index 0000000..e69de29