From 684ae8d8af9707517520a918cf5d36c7c0a1da35 Mon Sep 17 00:00:00 2001
From: HemantKumar01 <ytbhemant@gmail.com>
Date: Mon, 11 Dec 2023 11:04:27 +0530
Subject: [PATCH 1/4] redesign

---
 app.js                     |   7 +-
 public/css/dark-styles.css |  55 ++--
 public/css/styles.css      | 499 ++++++++++++++++++++-----------------
 views/about.ejs            |  39 +--
 views/home.ejs             |  37 +--
 views/login.ejs            | 118 ++++-----
 views/partials/footer.ejs  | 181 +++++++++++---
 views/partials/header.ejs  | 141 ++---------
 views/register.ejs         |   2 +-
 views/secret-form.ejs      |  14 +-
 views/secrets.ejs          |  49 ++--
 11 files changed, 605 insertions(+), 537 deletions(-)

diff --git a/app.js b/app.js
index 7d5fd04..b930f71 100644
--- a/app.js
+++ b/app.js
@@ -132,10 +132,13 @@ app.post("/register", function (req, res) {
     function (err, user) {
       if (err) {
         console.log(err);
-        res.send({ success: false, message: err.message })
+        res.send({ success: false, message: err.message });
       } else {
         passport.authenticate("local")(req, res, function () {
-          res.send({ success: true, message: "Registration Successful, Login to continue"})
+          res.send({
+            success: true,
+            message: "Registration Successful, Login to continue",
+          });
         });
       }
     }
diff --git a/public/css/dark-styles.css b/public/css/dark-styles.css
index c83e7db..09affe2 100644
--- a/public/css/dark-styles.css
+++ b/public/css/dark-styles.css
@@ -1,5 +1,6 @@
-body.dark {
-  background-color: #0f0e0e;
+body.dark,
+html.dark {
+  background-color: #3f1b52;
   color: white;
 }
 #theme-toggle.dark {
@@ -10,27 +11,37 @@ body.dark {
   background-color: #0e0d0d !important;
   color: white !important;
 }
-.jumbotron.dark {
-  color: white !important;
-  background: #005d4c; /* fallback for old browsers */
-  background: -webkit-linear-gradient(
-    to right,
-    #212a51,
-    #00735e
-  ) !important; /* Chrome 10-25, Safari 5.1-6 */
-  background: linear-gradient(
-    to right,
-    #212a51,
-    #00735e
-  ) !important; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-}
-
+.hero.dark,
+.hero .main-content h1.dark {
+  color: #f6c4ff !important;
+}
 .about-title.dark {
   color: white !important;
 }
-
-.card-body.dark {
-  background-color: #302930 !important;
-  outline: none !important;
-  border: none !important;
+.login-container.dark,
+.register-container.dark {
+  background-color: rgba(255, 255, 255, 0.105);
+}
+button.dark {
+  background-color: #f6c4ff;
+  color: #3f1b52;
+}
+button.secondary.dark {
+  color: #f6c4ff;
+  outline-color: #f6c4ff;
+  background-color: #3f1b52;
+}
+#about.dark {
+  background-color: #610d4a !important;
+  color: white !important;
+}
+.secrets-container.dark {
+  background-color: #3f1b52 !important;
+  color: #f6c4ff;
+}
+#nav_small.side_nav.dark {
+  background-color: #f6c4ff;
+}
+#nav_small.side_nav a.dark {
+  color: #3f1b52 !important;
 }
diff --git a/public/css/styles.css b/public/css/styles.css
index bd62a9e..bb19b07 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -1,274 +1,319 @@
-body {
-  background-color: #e8ecef;
+@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,200;1,600;1,900&display=swap");
+:root {
+  --accent-clr: #3f1b52;
 }
-html {
-  scroll-behavior: smooth;
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
 }
-.centered {
-  padding-top: 200px;
-  text-align: center;
+::selection {
+  color: var(--accent-clr);
+  background-color: #f9e1ff;
 }
-.about-title{
-  text-align: center;
-  letter-spacing: 0.01em;
-  padding:20px;
-  font: 8rem itc-bodoni-175, serif;
-  font-style: italic;
-  color: black;
-}
-@media (max-width:760px) {
-  .about-title{
-    font-size: 6rem;
-  }
+html,
+body {
+  height: 100%;
+  width: 100%;
+  scroll-behavior: smooth;
+  max-width: 100vw;
+  font-family: Poppins, sans-serif;
+  background-color: #f6c4ff;
 }
-@media (max-width:580px) {
-  .about-title{
-    font-size: 4rem;
-  }
+html {
+  overflow-x: hidden;
 }
-@media (max-width:400px) {
-  .about-title{
-    font-size: 3rem;
-  }
+.flexbox {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 20px;
 }
-
-/* .con */
-.hamburger{
-  display: none;
+.loader {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  width: 100%;
+  height: 100%;
+  background-color: #f6c4ff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
-@media screen and (max-width:400px) {
-  .hamburger{
-    display: block;
-    color:#343A40;
-    padding:3px 8px;
-    background-color: white;
-    border:1px solid black;
-    border-radius: 2px;
-  }
+.loader .spinner {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  border: 5px solid var(--accent-clr);
+  border-top-color: transparent;
+  border-bottom-color: transparent;
+  animation: spin 1.25s linear infinite;
 }
-@media screen and (max-width:400px) {
-  .form-inline a{
-    display: none;
-  }
+nav a {
+  color: #f6c4ff !important;
 }
-.side_nav{
-  display: none;
+nav a:hover {
+  border: 1px solid #f6c4ff !important;
 }
-@media (max-width:400px){
-  .side_nav{
-    height: fit-content;
-    width:100vw;
-    position: fixed;
-    z-index: 12;
-    top: 56px;
-  }
-  .side_nav .content{
-    color: white;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-  }
-  .side_nav .content a{
-    color:white;
-    background-color: #343A40;
-    border-radius:0px;
-    border: 1px solid black;
-  }
-  @media (min-width:200px) and (max-width:400px){
-    .side_nav .content a{
-      margin:0px!important;
-    }
-  }
-  .side_nav .content a:hover{
-    background-color: black;
-    color: white;
-  }
-  .side_nav{
-    display: block;
-    right: 0px;
-    transition: right 0.3s ease-in-out;
-  }
-}
-.hide{
-  overflow: hidden;
-  height: 0;
-  max-height: 0;
-  right:-450px;
-  transition: right 0.3s ease-in-out;
-}
-.paragraph{
-  margin-left:11%;
+.navbar-brand {
+  color: white !important;
 }
-@media screen and (max-width:992px){
-  .paragraph{
-    text-align: center;
-    margin:auto;
-    padding:10px;
-  }
+#nav_small {
+  display: none;
 }
 #theme-toggle {
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border-radius: 50%;
+  background-color: #f6c4ff;
+  color: var(--accent-clr);
+  margin-right: 20px;
+}
+button {
   cursor: pointer;
+
+  padding: 1em 2em;
   border: none;
   outline: none;
-  border-radius: 50%;
-  font-size: 20px;
-  width: 35px;
-  height: 35px;
-  text-align: center;
-  margin-right: 1em;
-}
+  background: var(--accent-clr);
+  color: #f6c4ff;
+  font-size: 1.2rem;
+  border-radius: 10px;
+  transition: background-color 0.5s, box-shadow 0.5s, color 0.5s;
 
-@media (max-width: 1000px) and (min-width: 320px) {
-  .jumbotron {
-    min-height: 100vh;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0;
-    font-size: x-large;
-  }
+  -webkit-tap-highlight-color: transparent;
+}
+button.secondary {
+  background-color: transparent;
+  color: var(--accent-clr);
+  outline: 2px solid var(--accent-clr);
+}
+button:hover {
+  background-color: #070b43b2;
+  color: #00ffa6;
+}
+.hero {
+  position: relative;
+  width: 100%;
+  min-height: 100vh;
+  padding: 3rem;
+  z-index: 10;
+  justify-content: space-evenly;
+}
+header {
+  position: relative;
+
+  z-index: 30;
+
+  width: 100%;
+  height: 60px;
+  line-height: 60px;
+  padding: 0 3rem;
 }
-.form-inline a {
-  transition: 0.3s;
+header a {
+  text-decoration: none;
+  max-width: 300px;
 }
-.form-inline a:hover {
-  transform: scale(1.1);
+header h1 {
+  font-size: 1.5rem;
+  font-weight: 500;
+  color: #3d4372;
+  width: max-content;
+}
+.hero .container {
+  width: max-content;
+  margin: 0;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.hero .main-content {
+  position: relative;
+  z-index: 10;
+  width: 60vw;
+  max-width: 650px;
+  margin-top: -0px;
+}
+.hero .main-content h1 {
+  font-size: clamp(2rem, 7vw, 4rem);
+  color: #460967;
+}
+.hero .main-content .highlight {
+  color: var(--accent-clr);
+}
+.hero .main-content .char {
+  height: 1.3em;
+  overflow: hidden;
+  padding-top: 1.2em;
+
+  animation: wipe-in 1s ease-in-out forwards;
+}
+.hero .main-content .word {
+  white-space: nowrap;
+}
+.hero .buttons-container {
+  position: relative;
+  z-index: 10;
+  margin-top: 20px;
+  justify-content: flex-start;
+  opacity: 1;
+  transform: translateY(10px);
+  transition: 1.25s ease-in-out;
+}
+.illustration {
+  scale: 2.5;
+  margin-top: -10%;
+  animation: wave 4s ease-in-out infinite;
+}
+.hamburger {
+  display: none;
 }
-.container a {
-  transition: 0.3s;
+#about {
+  background-color: var(--accent-clr);
+  color: #f6c4ff;
+  padding: 4rem 3rem;
+  flex-direction: column;
 }
-.container a:hover {
-  transform: scale(1.1);
+#about p {
+  text-align: center;
+  max-width: 700px;
+  font-size: 3em;
+  font-weight: 100;
 }
-
-.social {
-  transition: 0.3s;
+#about button {
+  border: 2px solid #f6c4ff;
 }
-.social:hover {
-  transform: scale(1.2);
+.about-page {
+  padding: 3rem;
 }
-
-.secret-text {
-  text-align: center;
-  font-size: 2rem;
-  color: #fff;
-  background-color: #000;
+.about-title {
+  font-size: 3rem;
+  font-weight: 700;
+  color: #3f1b52;
+  padding-left: 1ch;
+  border-left: 15px solid currentColor;
+  border-radius: 10px;
 }
 .container-about {
-  display: flex;
-  flex-direction: row;
-  margin-bottom: 100px;
-  margin-top: -33px;
-  /* flex-direction: row; */
-  justify-content: center;
-  align-items: center;
+  justify-content: space-between;
 }
-.container-image {
-  min-width: 450px;
-  max-width: 500px;
-  margin: 20px!important;
+.login-container .card,
+.register-container .card {
+  padding: 0;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  box-shadow: none;
+  filter: none;
 }
-@media (min-width:450px){
-  .container-image {
-    min-width:300px;
-    max-width:450px;
-    margin:20px!important;
-  }
+.login-container .card-body,
+.register-container .card-body {
+  padding-left: 0;
 }
-@media (min-width:200px){
-  .container-image {
-    min-width:200px;
-    max-width:300px;
-    margin:20px!important;
-  }
+.login-container,
+.register-container {
+  background-color: rgba(255, 255, 255, 0.473);
+  padding: 2rem;
+  border-radius: 20px;
 }
-@media (min-width:200px) and (max-width:400px){
-  .container-image img {
-    transform: scale(0.9);
-  }
+input {
+  padding: 1rem !important;
+  border-radius: 10px !important;
 }
-#myBtn {
-  display: block;
+#goToTopBtn {
   position: fixed;
-  bottom: 10px;
-  right: 10px;
-  z-index: 99;
-  border: 1px solid black;
+  bottom: 20px;
+  right: 20px;
+  width: 50px;
+  height: 50px;
   border-radius: 50%;
-  outline: none;
   background-color: white;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
+  padding: 0;
+  object-fit: contain;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 2rem;
+  z-index: 100;
   cursor: pointer;
-  padding: 10px;
-  transform: scale(0.6);
-  transition: 0.3s;
+  transition: background-color 0.5s, color 0.5s;
 }
-#myBtn:hover {
-  transform: scale(1.1);
-  background-color: rgb(173, 167, 167);
+.secrets-container {
+  background-color: #f6c4ff;
 }
-
-@media screen and (max-width: 992px) {
-  .register {
-    display: none;
+.secrets-container h1 {
+  font-size: 3em;
+}
+.secrets-container .fa-key {
+  scale: 0.7;
+}
+.secret-text {
+  font-size: 1.3em;
+  padding: 1rem;
+}
+@media (max-width: 600px) {
+  .hero {
+    flex-direction: column-reverse;
   }
-  .login {
-    display: none;
+  .illustration {
+    scale: 1;
   }
-  .container-about {
-    flex-direction: column-reverse;
+  .hamburger {
+    display: block;
+    color: #f6c4ff;
   }
-  .container-image {
-    margin-bottom: 80px;
-    max-width: 600px;
+  .nav_big {
+    display: none !important;
   }
-}
-.button_all_white{
-  width: fit-content;
-  height: fit-content;
-  background-color:white;
-  padding:5px;
-  border-radius: 5px;
-  font-size: 1.5rem;
-  font-weight: 400;
-  color:black;
-  margin:5px;
-  cursor: pointer;
-}
-.button_all_black{
-  width: fit-content;
-  height: fit-content;
-  background-color:black;
-  padding:5px;
-  border-radius: 5px;
-  font-size: 1.5rem;
-  font-weight: 300;
-  color:white;
-  margin:5px;
-  cursor: pointer;
-}
-.button_all_black:hover{
-  text-decoration: none;
-  color:white;
-}
-.button_all_white:hover{
-  text-decoration: none;
-  color:black;
-}
-.display-3{
-  font-size: 5rem;
-}
-@media (min-width:600px) and (max-width:850px){
-  .display-3{
-    font-size: 3rem;
+  #nav_small.side_nav {
+    position: absolute;
+    z-index: 1000;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--accent-clr);
+    color: #f6c4ff;
+  }
+  #nav_small.side_nav a {
+    width: 100%;
+    color: #f6c4ff;
+  }
+  .hero .container {
+    align-items: center;
+  }
+  .main-content {
+    margin-left: unset !important;
+    margin-top: unset !important;
+  }
+  .main-content h1 {
+    text-align: center;
+  }
+  .buttons-container {
+    justify-content: center !important;
+    align-items: center;
+    width: 100%;
   }
 }
-@media (min-width:400px) and (max-width:600px){
-  .display-3{
-    font-size: 2.5rem;
+
+@keyframes wipe-in {
+  0% {
+    padding-top: 1.3em;
+  }
+  100% {
+    padding-top: 0;
   }
 }
-@media (min-width:200px) and (max-width:400px){
-  .display-3{
-    font-size: 2rem;
+@keyframes wave {
+  0% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(10deg);
+  }
+  100% {
+    transform: rotate(0deg);
   }
 }
diff --git a/views/about.ejs b/views/about.ejs
index 62ab9c2..ff1a9b9 100644
--- a/views/about.ejs
+++ b/views/about.ejs
@@ -1,24 +1,25 @@
 <%- include('partials/header') %>
+<div class="about-page">
+  <p class="about-title">About Secrets</p>
 
-<p
-  class="about-title"
->
-  About Secrets
-</p>
-
-<div class="container-about">
-  <div class="container-text" style="padding: -3% 6% 6% 20%">
-    <p style="font-size: 1.5rem;" class="paragraph">
-      Secrets is the place where everyone can add their secrets.It is created
-      with an idea of having a fun space where people could share their secrets,
-      without revealing their true identity. It makes more intresting to know
-      that other dont want to share it but still are sharing. Thus, share your
-      secrets and we will store them for you, without revealing your identity,
-      making things interesting.
-    </p>
-  </div>
-  <div class="container-image">
-    <img src="image/secrets.webp" alt="" style="width: 100%; padding: 2%" />
+  <div class="flexbox container-about">
+    <div class="container-text" style="padding: -3% 6% 6% 20%">
+      <p style="font-size: 1.5rem; max-width: 700px" class="paragraph">
+        Secrets is the place where everyone can add their secrets.It is created
+        with an idea of having a fun space where people could share their
+        secrets, without revealing their true identity. It makes more intresting
+        to know that other dont want to share it but still are sharing. Thus,
+        share your secrets and we will store them for you, without revealing
+        your identity, making things interesting.
+      </p>
+    </div>
+    <div class="container-image">
+      <img
+        src="image/secrets.webp"
+        alt=""
+        style="width: 100%; padding: 2%; max-width: 500px"
+      />
+    </div>
   </div>
 </div>
 
diff --git a/views/home.ejs b/views/home.ejs
index 70db10b..841967e 100644
--- a/views/home.ejs
+++ b/views/home.ejs
@@ -1,18 +1,27 @@
 <%- include('partials/header') %>
 
-  <div style="background: #74ebd5;  /* fallback for old browsers */
-background: -webkit-linear-gradient(to right, #ACB6E5, #74ebd5);  /* Chrome 10-25, Safari 5.1-6 */
-background: linear-gradient(to right, #ACB6E5, #74ebd5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-" class="jumbotron centered">
-    <div class="container">
-      <i class="fas fa-key fa-6x"></i>
-      <h1 class="display-3">Secrets</h1>
-      <p class="lead">Don't keep your secrets, share them anonymously!</p>
-      <hr />
-      <div class="d-flex justify-content-center">
-        <a class="button_all_white" href="/register" role="button">Register</a>
-        <a class="button_all_black" href="/login" role="button">Login</a>
-      </div>
+<div class="flexbox hero">
+  <div class="flexbox container">
+    <div class="main-content">
+      <h1>Don't Keep Your Secrets,</h1>
+      <h1 class="display-3">Share Them Anonymously!</h1>
     </div>
+
+    <div class="flexbox buttons-container" style="opacity: 0">
+      <a href="/register" role="button"
+        ><button class="secondary">Register</button></a
+      >
+      <a href="/login" role="button"><button>Login</button></a>
+    </div>
+  </div>
+  <div class="illustration">
+    <i class="fas fa-key fa-6x"></i>
   </div>
-  <%- include('partials/footer') %>
\ No newline at end of file
+</div>
+<section id="about" class="flexbox">
+  <p>
+    We allow you to add your secrets that you don't want to share with anyone.
+  </p>
+  <a href="/about"><button>Know More</button></a>
+</section>
+<%- include('partials/footer') %>
diff --git a/views/login.ejs b/views/login.ejs
index 752c45d..6d9233e 100644
--- a/views/login.ejs
+++ b/views/login.ejs
@@ -1,74 +1,56 @@
 <%- include('partials/header') %>
-<div 
-            class="container mt-5"
-            style="margin-bottom: 197px"
-        >
-            <h1>Login</h1>
+<div class="login-container container mt-5" style="margin-bottom: 197px">
+  <h1>Login</h1>
 
-            <div class="row">
-                <div class="col-sm-8">
-                    <div class="card">
-                        <div class="card-body">
-                            <!-- Makes POST request to /login route -->
-                            <form
-                                action="/login"
-                                method="POST"
-                            >
-                                <div class="form-group">
-                                    <label for="email">Email</label>
-                                    <input
-                                        type="email"
-                                        class="form-control"
-                                        name="username"
-                                    />
-                                </div>
-                                <div class="form-group">
-                                    <label for="password">Password</label>
-                                    <input
-                                        type="password"
-                                        class="form-control"
-                                        name="password"
-                                    />
-                                </div>
-                                <button
-                                    type="submit"
-                                    class="button_all_black"
-                                    role="button"
-                                >
-                                    Login
-                                </button>
-                            </form>
-                        </div>
-                    </div>
-                </div>
+  <div class="row">
+    <div class="col-sm-8">
+      <div class="card">
+        <div class="card-body">
+          <!-- Makes POST request to /login route -->
+          <form action="/login" method="POST">
+            <div class="form-group">
+              <label for="email">Email</label>
+              <input type="email" class="form-control" name="username" />
+            </div>
+            <div class="form-group">
+              <label for="password">Password</label>
+              <input type="password" class="form-control" name="password" />
+            </div>
+            <button type="submit" class="button_all_black" role="button">
+              Login
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
 
-                <div class="col-sm-4">
-                    <div class="card social-block">
-                        <div class="card-body">
-                            <a
-                                class="btn btn-block btn-social btn-google"
-                                href="/auth/google"
-                                role="button"
-                            >
-                                <i class="fab fa-google"></i>
-                                Sign Up with Google
-                            </a>
-                        </div>
-                    </div>
+    <div class="col-sm-4">
+      <div class="card social-block">
+        <div class="card-body">
+          <a
+            class="btn btn-block btn-social btn-google"
+            href="/auth/google"
+            role="button"
+          >
+            <i class="fab fa-google"></i>
+            Sign Up with Google
+          </a>
+        </div>
+      </div>
 
-                    <div class="card social-block">
-                        <div class="card-body">
-                            <a
-                                class="btn btn-block btn-social btn-facebook"
-                                href="/auth/facebook"
-                                role="button"
-                            >
-                                <i class="fab fa-facebook"></i>
-                                Sign Up with Facebook
-                            </a>
-                        </div>
-                    </div>
-                </div>
-            </div>
+      <div class="card social-block">
+        <div class="card-body">
+          <a
+            class="btn btn-block btn-social btn-facebook"
+            href="/auth/facebook"
+            role="button"
+          >
+            <i class="fab fa-facebook"></i>
+            Sign Up with Facebook
+          </a>
         </div>
+      </div>
+    </div>
+  </div>
+</div>
 <%- include('partials/footer') %>
diff --git a/views/partials/footer.ejs b/views/partials/footer.ejs
index 3d45cf7..9b88a22 100644
--- a/views/partials/footer.ejs
+++ b/views/partials/footer.ejs
@@ -1,37 +1,158 @@
+
 <% const currentYear=new Date().getFullYear(); %>
-  <div class="bg-dark text-center" style="padding: 1em 0 1em 0;">
-
-    <h5 class="card-title" style="color: white;">Share your secrets, anonymously!</h5>
-    <h6 class="card-title" style="color: white; ">&copy; Copyright <%= currentYear %>
-    </h6>
-    <p class="card-text" style="color: white;">Made by <a href="https://github.com/Kritika30032002"
-        style="text-decoration: none;color: white;"> Kritika Gupta </a></p>
-    <!-- <p class="card-text" style="color: white;">&copy; Copyright <%= currentYear %> </p> -->
-    <!-- <div style="padding-bottom: 5em;">     -->
-    <a href="https://www.linkedin.com/in/kritika-gupta-343458212" class="btn my-2 my-sm-0 social" type="submit" style="
-      border: none;
-      margin-right: 1em;
-    
-    ">
-      <img src="https://static-00.iconduck.com/assets.00/linkedin-icon-2048x2048-ya5g47j2.png" height="50px" width="50px" style="
-        border: 3px white solid;
-        border-radius: 100%;
-      "/>
-    </a>
-    <a href="https://github.com/Kritika30032002" class="btn my-2 my-sm-0 social" type="submit" style="
-      border: none;
-    "> 
-      <img src="https://cdn3.iconfinder.com/data/icons/inficons/512/github.png" height="50px" width="50px" style="
-        border: 3px white solid;
-        border-radius: 100%;
-      "/>
+
+<div class="bg-dark text-center" style="padding: 1em 0 1em 0">
+  <h5 class="card-title" style="color: white">
+    Share your secrets, anonymously!
+  </h5>
+  <h6 class="card-title" style="color: white">
+    &copy; Copyright <%= currentYear %>
+  </h6>
+  <p class="card-text" style="color: white">
+    Made by
+    <a
+      href="https://github.com/Kritika30032002"
+      style="text-decoration: none; color: white"
+    >
+      Kritika Gupta
     </a>
+  </p>
+  <!-- <p class="card-text" style="color: white;">&copy; Copyright <%= currentYear %> </p> -->
+  <!-- <div style="padding-bottom: 5em;">     -->
+  <a
+    href="https://www.linkedin.com/in/kritika-gupta-343458212"
+    class="btn my-2 my-sm-0 social"
+    type="submit"
+    style="border: none; margin-right: 1em"
+  >
+    <img
+      src="https://static-00.iconduck.com/assets.00/linkedin-icon-2048x2048-ya5g47j2.png"
+      height="50px"
+      width="50px"
+      style="border: 3px white solid; border-radius: 100%"
+    />
+  </a>
+  <a
+    href="https://github.com/Kritika30032002"
+    class="btn my-2 my-sm-0 social"
+    type="submit"
+    style="border: none"
+  >
+    <img
+      src="https://cdn3.iconfinder.com/data/icons/inficons/512/github.png"
+      height="50px"
+      width="50px"
+      style="border: 3px white solid; border-radius: 100%"
+    />
+  </a>
+
+  <!-- </div> -->
+</div>
+<script>
+  function toggle_nav() {
+    let naV = document.getElementById("nav_small");
+    let Nav = document.getElementById("nav_small2");
+    if (
+      naV.classList.contains("side_nav") &&
+      Nav.classList.contains("content")
+    ) {
+      naV.classList.remove("side_nav");
+      naV.classList.add("hide");
+      Nav.classList.remove("content");
+      Nav.classList.add("hide");
+    } else {
+      naV.classList.remove("hide");
+      naV.classList.add("side_nav");
+      Nav.classList.remove("hide");
+      Nav.classList.add("content");
+    }
+  }
+  function toggle_nav_body() {
+    let naV = document.getElementById("nav_small");
+    if (naV.classList.contains("side_nav")) {
+      naV.classList.remove("side_nav");
+      naV.classList.add("hide");
+    }
+  }
+  function toggleTheme() {
+    document.querySelectorAll("*").forEach((el) => {
+      el.classList.toggle("dark");
+    });
+    // changing the icon inside the theme toggle button
+    if (localStorage.getItem("theme") === "light") {
+      document.querySelector("#theme-toggle .fa-sun").style.display =
+        "none";
+      document.querySelector("#theme-toggle .fa-moon").style.display =
+        "inline-block";
+    } else {
+      document.querySelector("#theme-toggle .fa-sun").style.display =
+        "inline-block";
+      document.querySelector("#theme-toggle .fa-moon").style.display =
+        "none";
+    }
+  }
+
+  if (!localStorage.getItem("theme")) {
+    // if theme is not already set on localstorage
+    if (
+      window.matchMedia &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches
+    ) {
+      // dark mode preferred by user as per os settings
+      localStorage.setItem("theme", "dark");
+    } else {
+      localStorage.setItem("theme", "light");
+    }
+  }
+
+  document.getElementById("theme-toggle").addEventListener("click", (e) => {
+    e.preventDefault();
+    localStorage.setItem(
+      "theme",
+      localStorage.getItem("theme") === "light" ? "dark" : "light"
+    );
+    toggleTheme();
+  });
+</script>
+
+<!-- library to break full line into separate words -->
+<script src="https://unpkg.com/split-type"></script>
 
-    <!-- </div> -->
+<!-- animation library -->
+<script>
+  // Implementing the landing page animation
+  function startAnimation() {
+    const heading = document.querySelector(".hero .main-content");
+    if(!heading){
+      return;
+    }
+    const buttonContainer = document.querySelector(
+      ".hero .buttons-container"
+    );
 
-  </div>
+    const init_value = heading.innerHTML;
+    const headingSplit = new SplitType(heading);
 
+    for (let i = 0; i < headingSplit.chars.length; i++) {
+      let char = headingSplit.chars[i];
+      char.style.setProperty("animation-delay", i * 0.05 + "s");
+    }
 
-  </body>
+    // after whole animation restore initial content so that newly formed characters don't interfere with other things like resizing
+    setTimeout(() => {
+      //   heading.innerHTML = init_value;
+      //   heading.style.lineHeight = "1.72em";
 
-  </html>
\ No newline at end of file
+      buttonContainer.style.opacity = "1";
+      buttonContainer.style.transform = "none";
+    }, headingSplit.chars.length * 0.05 * 1000 + 500);
+  }
+  window.onload = () => {
+    startAnimation();
+    if (localStorage.getItem("theme") === "dark") {
+      toggleTheme();
+    }
+  };
+</script>
+</body>
+</html>
diff --git a/views/partials/header.ejs b/views/partials/header.ejs
index 0346e3f..466949f 100644
--- a/views/partials/header.ejs
+++ b/views/partials/header.ejs
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
-<html lang="en" dir="ltr">
+<html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Secrets</title>
     <link rel="icon" type="image/x-icon" href="image/key.ico" />
     <link
@@ -24,11 +24,7 @@
 
   <body oncanplay="toggle_nav_body()">
     <nav class="navbar navbar-dark bg-dark justify-content-between" id="navbar">
-      <a
-        href="/"
-        class="navbar-brand"
-        style="color: white; cursor: pointer; margin-left: 1em"
-      >
+      <a href="/" class="navbar-brand">
         <i class="fas fa-key fa-1.5x logo" style="color: white"></i>
         Secrets</a
       >
@@ -37,58 +33,18 @@
           <i class="fas fa-sun" style="display: none"></i>
           <i class="fas fa-moon"></i>
         </button>
-        <a
-          href="/"
-          class="btn my-2 my-sm-0 home"
-          type="submit"
-          style="
-            color: black;
-            border: none;
-            background-color: white;
-            margin-right: 1em;
-          "
-        >
-          Home
-        </a>
-        <a
-          href="/about"
-          class="btn my-2 my-sm-0 about"
-          type="submit"
-          style="
-            color: black;
-            border: none;
-            background-color: white;
-            margin-right: 1em;
-          "
-        >
-          About
-        </a>
-        <a
-          href="/register"
-          class="btn my-1 my-sm-0 register"
-          type="submit"
-          style="
-            color: black;
-            border: none;
-            background-color: white;
-            margin-right: 1em;
-          "
-        >
-          Register
-        </a>
-        <a
-          href="/login"
-          class="btn my-2 my-sm-0 login"
-          type="submit"
-          style="
-            color: black;
-            border: none;
-            background-color: white;
-            margin-right: 1em;
-          "
-        >
-          Login
-        </a>
+        <div class="nav_big">
+          <a href="/" class="btn my-2 my-sm-0 home" type="submit"> Home </a>
+          <a href="/about" class="btn my-2 my-sm-0 about" type="submit">
+            About
+          </a>
+          <a href="/register" class="btn my-1 my-sm-0 register" type="submit">
+            Register
+          </a>
+          <a href="/login" class="btn my-2 my-sm-0 login" type="submit">
+            Login
+          </a>
+        </div>
         <div class="hamburger" onclick="toggle_nav()">
           <i class="fa fa-bars"></i>
         </div>
@@ -114,72 +70,5 @@
         </a>
       </div>
     </div>
-    <script>
-      function toggle_nav(){
-        let naV=document.getElementById("nav_small");
-        let Nav=document.getElementById("nav_small2");
-        if(naV.classList.contains("side_nav") && Nav.classList.contains("content")){
-          naV.classList.remove("side_nav");
-          naV.classList.add("hide");
-          Nav.classList.remove("content");
-          Nav.classList.add("hide");
-        }else{
-            naV.classList.remove("hide");
-            naV.classList.add("side_nav");
-            Nav.classList.remove("hide");
-          Nav.classList.add("content");
-        }
-      }
-      function toggle_nav_body(){
-        let naV=document.getElementById("nav_small");
-        if(naV.classList.contains("side_nav")){
-          naV.classList.remove("side_nav");
-          naV.classList.add("hide");
-        }
-      }
-      function toggleTheme() {
-        document.querySelectorAll("*").forEach((el) => {
-          el.classList.toggle("dark");
-        });
-        // changing the icon inside the theme toggle button
-        if (localStorage.getItem("theme") === "light") {
-          document.querySelector("#theme-toggle .fa-sun").style.display =
-            "none";
-          document.querySelector("#theme-toggle .fa-moon").style.display =
-            "inline-block";
-        } else {
-          document.querySelector("#theme-toggle .fa-sun").style.display =
-            "inline-block";
-          document.querySelector("#theme-toggle .fa-moon").style.display =
-            "none";
-        }
-      }
-
-      if (!localStorage.getItem("theme")) {
-        // if theme is not already set on localstorage
-        if (
-          window.matchMedia &&
-          window.matchMedia("(prefers-color-scheme: dark)").matches
-        ) {
-          // dark mode preferred by user as per os settings
-          localStorage.setItem("theme", "dark");
-        } else {
-          localStorage.setItem("theme", "light");
-        }
-      }
-      window.onload = function () {
-        if (localStorage.getItem("theme") === "dark") {
-          toggleTheme();
-        }
-      };
-      document.getElementById("theme-toggle").addEventListener("click", (e) => {
-        e.preventDefault();
-        localStorage.setItem(
-          "theme",
-          localStorage.getItem("theme") === "light" ? "dark" : "light"
-        );
-        toggleTheme();
-      });
-    </script>
   </body>
 </html>
diff --git a/views/register.ejs b/views/register.ejs
index dbed63a..368a69b 100644
--- a/views/register.ejs
+++ b/views/register.ejs
@@ -1,7 +1,7 @@
 <%- include('partials/header') %>
 
         <div 
-            class="container mt-5"
+            class="register-container container mt-5"
             style="margin-bottom: 197px"
         >
             <h1>Register</h1>
diff --git a/views/secret-form.ejs b/views/secret-form.ejs
index 26b4fa3..0031f54 100644
--- a/views/secret-form.ejs
+++ b/views/secret-form.ejs
@@ -1,20 +1,22 @@
 <%- include('partials/header') %>
 
-<div class="container">
-  <div class="jumbotron centered">
+<div class="container" style="text-align: center">
+  <div class="secrets-container jumbotron centered">
     <i class="fas fa-key fa-6x"></i>
     <h1 class="display-3">Secrets</h1>
     <p class="secret-text">Don't keep your secrets, share them anonymously!</p>
 
     <form action="/submit-secret-form" method="POST">
-
       <div class="form-group">
-        <input type="text" class="form-control text-center" name="secret" placeholder="What's your secret?">
+        <input
+          type="text"
+          class="form-control text-center"
+          name="secret"
+          placeholder="What's your secret?"
+        />
       </div>
       <button type="submit" class="btn btn-dark">Submit</button>
     </form>
-
-
   </div>
 </div>
 <%- include('partials/footer') %>
diff --git a/views/secrets.ejs b/views/secrets.ejs
index 993553f..be4d08d 100644
--- a/views/secrets.ejs
+++ b/views/secrets.ejs
@@ -1,28 +1,33 @@
 <%- include('partials/header') %>
 
-  <div class="jumbotron text-center">
-    <div class="container">
-      <i class="fas fa-key fa-6x"></i>
-      <h1 class="display-3">You've Discovered My Secret!</h1>
+<div class="secrets-container jumbotron text-center">
+  <div class="container">
+    <i class="fas fa-key fa-6x"></i>
+    <h1 class="display-3">You've Discovered My Secret!</h1>
 
-      <% usersWithSecrets.forEach(function(user){ %>
-        <p class="secret-text">
-          <%=user.secret%>
-        </p>
-        <% }) %>
+    <% usersWithSecrets.forEach(function(user){ %>
+    <p class="secret-text"><%=user.secret%></p>
+    <% }) %>
 
-
-          <hr>
-          <div class="d-flex justify-content-center">
-            <a class="button_all_white" href="/logout" role="button">Log Out</a>
-            <a class="button_all_black" href="/submit-secret-form" role="button">Submit a Secret</a>
-          </div>
+    <hr />
+    <div class="d-flex justify-content-center">
+      <a class="button_all_white" href="/logout" role="button"
+        ><button class="secondary" style="font-size: 1em; margin: 10px">
+          Log Out
+        </button></a
+      >
+      <a class="button_all_black" href="/submit-secret-form" role="button"
+        ><button style="font-size: 1em; margin: 10px">
+          Submit a Secret
+        </button></a
+      >
     </div>
   </div>
-  <a href="#navbar" id="myBtn" title="Go to top">
-    <img
-      src="https://img.icons8.com/ios-filled/50/000000/long-arrow-up.png"
-      style="width: 70%; height: 70%; color: white; position: relative; left: 7px"
-    />
-  </a>
-  <%- include('partials/footer') %>
\ No newline at end of file
+</div>
+<a href="#navbar" id="goToTopBtn" title="Go to top">
+  <img
+    src="https://img.icons8.com/ios-filled/50/000000/long-arrow-up.png"
+    style="width: 70%; height: 70%; color: white"
+  />
+</a>
+<%- include('partials/footer') %>

From 6e8c235c85e8633691486467d4c765a1b8e0c6b9 Mon Sep 17 00:00:00 2001
From: HemantKumar01 <ytbhemant@gmail.com>
Date: Mon, 11 Dec 2023 21:38:38 +0530
Subject: [PATCH 2/4] changed color theme

---
 public/css/dark-styles.css | 24 ++++++++++++------------
 public/css/styles.css      | 28 ++++++++++++++--------------
 views/register.ejs         |  2 +-
 3 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/public/css/dark-styles.css b/public/css/dark-styles.css
index 09affe2..9cef473 100644
--- a/public/css/dark-styles.css
+++ b/public/css/dark-styles.css
@@ -1,6 +1,6 @@
 body.dark,
 html.dark {
-  background-color: #3f1b52;
+  background-color: #19214e;
   color: white;
 }
 #theme-toggle.dark {
@@ -13,7 +13,7 @@ html.dark {
 }
 .hero.dark,
 .hero .main-content h1.dark {
-  color: #f6c4ff !important;
+  color: #a7b8ff !important;
 }
 .about-title.dark {
   color: white !important;
@@ -23,25 +23,25 @@ html.dark {
   background-color: rgba(255, 255, 255, 0.105);
 }
 button.dark {
-  background-color: #f6c4ff;
-  color: #3f1b52;
+  background-color: #a7b8ff;
+  color: #19214e;
 }
 button.secondary.dark {
-  color: #f6c4ff;
-  outline-color: #f6c4ff;
-  background-color: #3f1b52;
+  color: #a7b8ff;
+  outline-color: #a7b8ff;
+  background-color: #19214e;
 }
 #about.dark {
-  background-color: #610d4a !important;
+  background-color: #093c7e !important;
   color: white !important;
 }
 .secrets-container.dark {
-  background-color: #3f1b52 !important;
-  color: #f6c4ff;
+  background-color: #19214e !important;
+  color: #a7b8ff;
 }
 #nav_small.side_nav.dark {
-  background-color: #f6c4ff;
+  background-color: #a7b8ff;
 }
 #nav_small.side_nav a.dark {
-  color: #3f1b52 !important;
+  color: #19214e !important;
 }
diff --git a/public/css/styles.css b/public/css/styles.css
index bb19b07..bb7ca8b 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -1,6 +1,6 @@
 @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,200;1,600;1,900&display=swap");
 :root {
-  --accent-clr: #3f1b52;
+  --accent-clr: #19214e;
 }
 * {
   margin: 0;
@@ -9,7 +9,7 @@
 }
 ::selection {
   color: var(--accent-clr);
-  background-color: #f9e1ff;
+  background-color: #e1e6ff;
 }
 html,
 body {
@@ -18,7 +18,7 @@ body {
   scroll-behavior: smooth;
   max-width: 100vw;
   font-family: Poppins, sans-serif;
-  background-color: #f6c4ff;
+  background-color: #a7b8ff;
 }
 html {
   overflow-x: hidden;
@@ -37,7 +37,7 @@ html {
   z-index: 1000;
   width: 100%;
   height: 100%;
-  background-color: #f6c4ff;
+  background-color: #a7b8ff;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -52,10 +52,10 @@ html {
   animation: spin 1.25s linear infinite;
 }
 nav a {
-  color: #f6c4ff !important;
+  color: #a7b8ff !important;
 }
 nav a:hover {
-  border: 1px solid #f6c4ff !important;
+  border: 1px solid #a7b8ff !important;
 }
 .navbar-brand {
   color: white !important;
@@ -68,7 +68,7 @@ nav a:hover {
   height: 40px;
   padding: 0;
   border-radius: 50%;
-  background-color: #f6c4ff;
+  background-color: #a7b8ff;
   color: var(--accent-clr);
   margin-right: 20px;
 }
@@ -79,7 +79,7 @@ button {
   border: none;
   outline: none;
   background: var(--accent-clr);
-  color: #f6c4ff;
+  color: #a7b8ff;
   font-size: 1.2rem;
   border-radius: 10px;
   transition: background-color 0.5s, box-shadow 0.5s, color 0.5s;
@@ -172,7 +172,7 @@ header h1 {
 }
 #about {
   background-color: var(--accent-clr);
-  color: #f6c4ff;
+  color: #a7b8ff;
   padding: 4rem 3rem;
   flex-direction: column;
 }
@@ -183,7 +183,7 @@ header h1 {
   font-weight: 100;
 }
 #about button {
-  border: 2px solid #f6c4ff;
+  border: 2px solid #a7b8ff;
 }
 .about-page {
   padding: 3rem;
@@ -242,7 +242,7 @@ input {
   transition: background-color 0.5s, color 0.5s;
 }
 .secrets-container {
-  background-color: #f6c4ff;
+  background-color: #a7b8ff;
 }
 .secrets-container h1 {
   font-size: 3em;
@@ -263,7 +263,7 @@ input {
   }
   .hamburger {
     display: block;
-    color: #f6c4ff;
+    color: #a7b8ff;
   }
   .nav_big {
     display: none !important;
@@ -275,11 +275,11 @@ input {
     display: flex;
     flex-direction: column;
     background-color: var(--accent-clr);
-    color: #f6c4ff;
+    color: #a7b8ff;
   }
   #nav_small.side_nav a {
     width: 100%;
-    color: #f6c4ff;
+    color: #a7b8ff;
   }
   .hero .container {
     align-items: center;
diff --git a/views/register.ejs b/views/register.ejs
index afaf30a..f4131d1 100644
--- a/views/register.ejs
+++ b/views/register.ejs
@@ -97,7 +97,7 @@
         const userPassword = document.getElementById("user-password").value;
         var regex =
           /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
-
+        
         if (!regex.test(userPassword)) {
           Toastify({
             text: "Password must have at least 8 characters, including one uppercase letter, one lowercase letter, one number, and one special character.",

From f34476ab10fda94fdb0f64b0c2f103cd64d3fa95 Mon Sep 17 00:00:00 2001
From: HemantKumar01 <ytbhemant@gmail.com>
Date: Mon, 11 Dec 2023 21:44:53 +0530
Subject: [PATCH 3/4] color corrections

---
 public/css/styles.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/css/styles.css b/public/css/styles.css
index bb7ca8b..07ae187 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -138,7 +138,7 @@ header h1 {
 }
 .hero .main-content h1 {
   font-size: clamp(2rem, 7vw, 4rem);
-  color: #460967;
+  color: #0b0967;
 }
 .hero .main-content .highlight {
   color: var(--accent-clr);
@@ -191,7 +191,7 @@ header h1 {
 .about-title {
   font-size: 3rem;
   font-weight: 700;
-  color: #3f1b52;
+  color: #1b1c52;
   padding-left: 1ch;
   border-left: 15px solid currentColor;
   border-radius: 10px;

From e94703dbffb7435c35c9090162d2b01dc92e1cb0 Mon Sep 17 00:00:00 2001
From: HemantKumar01 <ytbhemant@gmail.com>
Date: Tue, 12 Dec 2023 13:22:50 +0530
Subject: [PATCH 4/4] more blue

---
 public/css/dark-styles.css | 22 +++++++++++-----------
 public/css/styles.css      | 26 +++++++++++++-------------
 2 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/public/css/dark-styles.css b/public/css/dark-styles.css
index 9cef473..bbbba08 100644
--- a/public/css/dark-styles.css
+++ b/public/css/dark-styles.css
@@ -1,6 +1,6 @@
 body.dark,
 html.dark {
-  background-color: #19214e;
+  background-color: #192e4e;
   color: white;
 }
 #theme-toggle.dark {
@@ -13,7 +13,7 @@ html.dark {
 }
 .hero.dark,
 .hero .main-content h1.dark {
-  color: #a7b8ff !important;
+  color: #a7daff !important;
 }
 .about-title.dark {
   color: white !important;
@@ -23,25 +23,25 @@ html.dark {
   background-color: rgba(255, 255, 255, 0.105);
 }
 button.dark {
-  background-color: #a7b8ff;
-  color: #19214e;
+  background-color: #a7daff;
+  color: #192e4e;
 }
 button.secondary.dark {
-  color: #a7b8ff;
-  outline-color: #a7b8ff;
-  background-color: #19214e;
+  color: #a7daff;
+  outline-color: #a7daff;
+  background-color: #192e4e;
 }
 #about.dark {
   background-color: #093c7e !important;
   color: white !important;
 }
 .secrets-container.dark {
-  background-color: #19214e !important;
-  color: #a7b8ff;
+  background-color: #192e4e !important;
+  color: #a7daff;
 }
 #nav_small.side_nav.dark {
-  background-color: #a7b8ff;
+  background-color: #a7daff;
 }
 #nav_small.side_nav a.dark {
-  color: #19214e !important;
+  color: #192e4e !important;
 }
diff --git a/public/css/styles.css b/public/css/styles.css
index 07ae187..0d1581c 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -1,6 +1,6 @@
 @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,200;1,600;1,900&display=swap");
 :root {
-  --accent-clr: #19214e;
+  --accent-clr: #192e4e;
 }
 * {
   margin: 0;
@@ -18,7 +18,7 @@ body {
   scroll-behavior: smooth;
   max-width: 100vw;
   font-family: Poppins, sans-serif;
-  background-color: #a7b8ff;
+  background-color: #a7daff;
 }
 html {
   overflow-x: hidden;
@@ -37,7 +37,7 @@ html {
   z-index: 1000;
   width: 100%;
   height: 100%;
-  background-color: #a7b8ff;
+  background-color: #a7daff;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -52,10 +52,10 @@ html {
   animation: spin 1.25s linear infinite;
 }
 nav a {
-  color: #a7b8ff !important;
+  color: #a7daff !important;
 }
 nav a:hover {
-  border: 1px solid #a7b8ff !important;
+  border: 1px solid #a7daff !important;
 }
 .navbar-brand {
   color: white !important;
@@ -68,7 +68,7 @@ nav a:hover {
   height: 40px;
   padding: 0;
   border-radius: 50%;
-  background-color: #a7b8ff;
+  background-color: #a7daff;
   color: var(--accent-clr);
   margin-right: 20px;
 }
@@ -79,7 +79,7 @@ button {
   border: none;
   outline: none;
   background: var(--accent-clr);
-  color: #a7b8ff;
+  color: #a7daff;
   font-size: 1.2rem;
   border-radius: 10px;
   transition: background-color 0.5s, box-shadow 0.5s, color 0.5s;
@@ -172,7 +172,7 @@ header h1 {
 }
 #about {
   background-color: var(--accent-clr);
-  color: #a7b8ff;
+  color: #a7daff;
   padding: 4rem 3rem;
   flex-direction: column;
 }
@@ -183,7 +183,7 @@ header h1 {
   font-weight: 100;
 }
 #about button {
-  border: 2px solid #a7b8ff;
+  border: 2px solid #a7daff;
 }
 .about-page {
   padding: 3rem;
@@ -242,7 +242,7 @@ input {
   transition: background-color 0.5s, color 0.5s;
 }
 .secrets-container {
-  background-color: #a7b8ff;
+  background-color: #a7daff;
 }
 .secrets-container h1 {
   font-size: 3em;
@@ -263,7 +263,7 @@ input {
   }
   .hamburger {
     display: block;
-    color: #a7b8ff;
+    color: #a7daff;
   }
   .nav_big {
     display: none !important;
@@ -275,11 +275,11 @@ input {
     display: flex;
     flex-direction: column;
     background-color: var(--accent-clr);
-    color: #a7b8ff;
+    color: #a7daff;
   }
   #nav_small.side_nav a {
     width: 100%;
-    color: #a7b8ff;
+    color: #a7daff;
   }
   .hero .container {
     align-items: center;