From 2ff9d356b2e0abee9cd1ad206574d88a49d86ac5 Mon Sep 17 00:00:00 2001
From: Fluffy-Bean <michal-gdula@protonmail.com>
Date: Fri, 12 Aug 2022 16:54:35 +0000
Subject: [PATCH] Finishing up with switching to SASS

---
 about.php                  |  10 +-
 account/account.php        |  36 +--
 account/login.php          |  32 +--
 account/password-reset.php |  33 +--
 account/signup.php         |  36 ++-
 css/footer.css             |  20 --
 css/main.css               | 351 ++++++++++++++++++++++++-----
 css/main.css.map           |   2 +-
 css/main.scss              | 198 +++++++++-------
 css/master.css             | 447 -------------------------------------
 css/nav.css                |  91 --------
 css/scss/_body.scss        | 286 +++++++++++++++---------
 css/scss/_footer.scss      |  35 +--
 css/scss/_mixin.scss       |  54 +++--
 css/scss/_navigation.scss  | 156 +++++++------
 css/scss/_variables.scss   |  41 ++--
 ui/nav.php                 |  12 +-
 upload.php                 |  14 +-
 18 files changed, 828 insertions(+), 1026 deletions(-)
 delete mode 100644 css/footer.css
 delete mode 100644 css/master.css
 delete mode 100644 css/nav.css
diff --git a/about.php b/about.php
index 5efc5b2..0492a06 100644
--- a/about.php
+++ b/about.php
@@ -8,7 +8,7 @@
   <title>Lynx Gallery</title>
 
   <!-- Stylesheets -->
-  <link rel="stylesheet" href="css/master.css">
+  <link rel="stylesheet" href="css/main.css">
   <link rel="stylesheet" href="css/normalise.css">
 
   <!-- Google Fonts -->
@@ -33,21 +33,27 @@
 <body>
   <?php include "ui/nav.php"; ?>
 
-  <div class="about-root default-window">
+  <div class="about-root">
     <h2 id="about">What is Fluffys Amazing Gallery?</h2>
     <p>Fluffys Amazing Gallery is a smol project I originally started to control the images on my main page, but quickly turned into something much bigger...</p>
     <p>What Do I want this to become in the future? No clue, but I do want this to be usable by others, if its a file they download a docker image they setup on your own web server.</p>
     <p>Will it become that any time soon? No, but. I am going to work on this untill it becomes what I want it to be!</p>
 
+    <br>
+
     <h2 class="space-top-large" id="add-this">Can you add "A" or "B"?</h2>
     <p>No.</p>
 
+    <br>
+
     <h2 class="space-top-large" id="guide">How do I use this!</h2>
     <p>First you must obtain the invite code. If you don't have one and are interested in trying this, feel free to DM me on Telegram!</p>
     <p>But once you're done doing that, you can start making your account <a class='link' href="https://superdupersecteteuploadtest.fluffybean.gay/account/signup.php">at the signup page here</a>.</p>
     <p>From there you should be able to go and login <a class='link' href="https://superdupersecteteuploadtest.fluffybean.gay/account/login.php">at this fancy page here</a>!</p>
     <p>Now you should see "Welcome (your username)" at the homepage. From there navigate to the navbar and click on the upload button. Choose your file, enter the description and your image is up!</p>
 
+    <br>
+
     <h2 class="space-top-large">Credits!</h2>
     <p>To Carty for being super cool again and helping me get started with SQL and PHP!</p>
     <p>To <a class='link' href="https://phosphoricons.com/">Phosphor</a> for providing nice SVG icons.</p>
diff --git a/account/account.php b/account/account.php
index 911fb40..b5155ee 100644
--- a/account/account.php
+++ b/account/account.php
@@ -6,7 +6,7 @@
   <title>Lynx Gallery</title>
 
   <!-- Stylesheets -->
-  <link rel="stylesheet" href="../css/master.css">
+  <link rel="stylesheet" href="../css/main.css">
   <link rel="stylesheet" href="../css/normalise.css">
 
   <!-- Google Fonts -->
@@ -34,32 +34,32 @@
   include "../ui/nav.php";
   ?>
 
-  <div class="account-root default-window">
+  <div class="account-root">
     <h2>Account settings</h2>
     <?php
     if (isset($_SESSION["loggedin"]) && $_SESSION["loggedin"] === true) {
-      echo "<p>O hi ".$_SESSION["username"].".</p>";
-
-      // Join code
+      echo "<br>";
       if ($_SESSION["id"] == 1) {
-        echo "<h3 class='space-top'>Invite Codes</h3>";
+        echo "<h3>Invite Codes</h3>";
         $token_request = mysqli_query($conn, "SELECT * FROM tokens WHERE used = 0");
         while ($token = mysqli_fetch_array($token_request)) {
-            echo "<p class='text-box space-top center alert-default'>".$token['code']."</p>";
+            echo "<p>".$token['code']."</p>";
         }
       }
-
-      echo "<h3 class='space-top'>Danger ahead</h3>";
-      // Reset password
-      echo "<p class='text-box space-top-large center alert-default'>Resetting your password regularly is a good way of keeping your account safe</p>";
-      echo "<a class='btn alert-low space-top-small' href='https://superdupersecteteuploadtest.fluffybean.gay/account/password-reset.php'><img class='svg' src='../assets/icons/password.svg'>Reset Password</a>";
-
-      // Logout
-      echo "<p class='text-box space-top-large center alert-default'>Don't leave! I'm with the science team!</p>";
-      echo "<a class='btn alert-low space-top-small' href='https://superdupersecteteuploadtest.fluffybean.gay/account/logout.php'><img class='svg' src='../assets/icons/sign-out.svg'>Logout</a>";
+      ?>
+      <br>
+      <h3 class='space-top'>Danger ahead</h3>
+      <p>Resetting your password regularly is a good way of keeping your account safe</p>
+      <a class='btn btn-bad' href='https://superdupersecteteuploadtest.fluffybean.gay/account/password-reset.php'><img class='svg' src='../assets/icons/password.svg'>Reset Password</a>
+      <br>
+      <p>Don't leave! I'm with the science team!</p>
+      <a class='btn btn-bad' href='https://superdupersecteteuploadtest.fluffybean.gay/account/logout.php'><img class='svg' src='../assets/icons/sign-out.svg'>Logout</a>
+      <?php
     } else {
-      echo "<p class='space-bottom-large'>You must be logged in to change your account settings!</p>";
-      echo "<a class='btn alert-high space-top-large' href='https://superdupersecteteuploadtest.fluffybean.gay/account/login.php'>Login!</a>";
+      ?>
+      <p>You must be logged in to change your account settings!</p>
+      <a class='btn btn-good' href='https://superdupersecteteuploadtest.fluffybean.gay/account/login.php'>Login!</a>
+      <?php
     }
     ?>
   </div>
diff --git a/account/login.php b/account/login.php
index 6714787..4407df1 100644
--- a/account/login.php
+++ b/account/login.php
@@ -6,7 +6,7 @@
   <title>Lynx Gallery</title>
 
   <!-- Stylesheets -->
-  <link rel="stylesheet" href="../css/master.css">
+  <link rel="stylesheet" href="../css/main.css">
   <link rel="stylesheet" href="../css/normalise.css">
 
   <!-- Google Fonts -->
@@ -111,27 +111,17 @@
   }
   ?>
 
-  <div class="alert-banner">
-    <?php
-    if (isset($error)) {
-      echo notify($error, "low");
-    }
-    if (isset($success)) {
-      echo notify($success, "hight");
-    }
-    ?>
-    <script src='../scripts/alert.js'></script>
-  </div>
-
-  <div class="login-root default-window">
-    <h2 class="space-bottom">Login</h2>
-    <p class="space-bottom">Passwords are important to keep safe. Don't tell anyone your password, not even Fluffy!</p>
-    <form class="flex-down between" method="POST" action="login.php" enctype="multipart/form-data">
-      <input class="btn alert-default space-bottom" type="text" name="username" placeholder="Username">
-      <input class="btn alert-default space-bottom-large" type="password" name="password" placeholder="Password">
-      <button class="btn alert-high" type="submit" name="login"><img class="svg" src="../assets/icons/sign-in.svg">Login</button>
+  <div class="login-root">
+    <h2>Login</h2>
+    <p>Passwords are important to keep safe. Don't tell anyone your password, not even Fluffy!</p>
+    <br>
+    <form method="POST" action="login.php" enctype="multipart/form-data">
+      <input class="btn btn-neutral" type="text" name="username" placeholder="Username">
+      <input class="btn btn-neutral" type="password" name="password" placeholder="Password">
+      <br>
+      <button class="btn btn-good" type="submit" name="login"><img class="svg" src="../assets/icons/sign-in.svg">Login</button>
     </form>
-    <a class='btn alert-default space-top-large' href='https://superdupersecteteuploadtest.fluffybean.gay/account/signup.php'><img class="svg" src="../assets/icons/sign-in.svg">Need an account? Sign up!</a>
+    <a class='btn btn-neutral' href='https://superdupersecteteuploadtest.fluffybean.gay/account/signup.php'><img class="svg" src="../assets/icons/sign-in.svg">Need an account? Sign up!</a>
   </div>
 
   <?php include "../ui/footer.php"; ?>
diff --git a/account/password-reset.php b/account/password-reset.php
index d09db61..f4c69e6 100644
--- a/account/password-reset.php
+++ b/account/password-reset.php
@@ -6,7 +6,7 @@
   <title>Lynx Gallery</title>
 
   <!-- Stylesheets -->
-  <link rel="stylesheet" href="../css/master.css">
+  <link rel="stylesheet" href="../css/main.css">
   <link rel="stylesheet" href="../css/normalise.css">
 
   <!-- Google Fonts -->
@@ -83,33 +83,20 @@
         } else {
           $error = "Oopsie woopsie, somthing brokie :c";
         }
-
-        // Close connection
-        mysqli_close($stmt);
       }
     }
-
-    // Close connection
-    mysqli_close($conn);
   }
   ?>
 
-  <div class="alert-banner">
-    <?php
-    if (isset($error)) {
-      echo notify($error, "low");
-    }
-    ?>
-    <script src='../scripts/alert.js'></script>
-  </div>
-
-  <div class="password-reset-root default-window">
-    <h2 class="space-bottom">Reset Password</h2>
-    <p class="space-bottom">After reset, you will be kicked out to login again</p>
-    <form class="flex-down between" method="POST" action="password-reset.php" enctype="multipart/form-data">
-      <input class="btn alert-default space-bottom" type="password" name="new_password" placeholder="New Password">
-      <input class="btn alert-default space-bottom" type="password" name="confirm_password" placeholder="Confirm Password">
-      <button class="btn alert-low" type="submit" name="reset"><img class="svg" src="../assets/icons/sign-in.svg">Reset</button>
+  <div class="password-reset-root">
+    <h2>Reset Password</h2>
+    <p>After reset, you will be kicked out to login again</p>
+    <br>
+    <form method="POST" action="password-reset.php" enctype="multipart/form-data">
+      <input class="btn btn-neutral" type="password" name="new_password" placeholder="New Password">
+      <input class="btn btn-neutral" type="password" name="confirm_password" placeholder="Confirm Password">
+      <br>
+      <button class="btn btn-bad" type="submit" name="reset"><img class="svg" src="../assets/icons/sign-in.svg">Reset</button>
     </form>
   </div>
 
diff --git a/account/signup.php b/account/signup.php
index 0af0ddc..f72160f 100644
--- a/account/signup.php
+++ b/account/signup.php
@@ -6,7 +6,7 @@
   <title>Lynx Gallery</title>
 
   <!-- Stylesheets -->
-  <link rel="stylesheet" href="../css/master.css">
+  <link rel="stylesheet" href="../css/main.css">
   <link rel="stylesheet" href="../css/normalise.css">
 
   <!-- Google Fonts -->
@@ -175,27 +175,19 @@
   }
   ?>
 
-  <div class="alert-banner">
-    <?php
-    if (isset($error)) {
-      echo notify($error, "low");
-    }
-    if (isset($success)) {
-      echo notify($success, "hight");
-    }
-    ?>
-    <script src='../scripts/alert.js'></script>
-  </div>
-
-  <div class="signup-root default-window">
-    <h2 class="space-bottom">Make account</h2>
-    <p class="space-bottom">And amazing things happened here...</p>
-    <form class="flex-down between" method="POST" action="signup.php" enctype="multipart/form-data">
-      <input class="btn alert-default space-bottom-large" type="text" name="username" placeholder="Username">
-      <input class="btn alert-default space-bottom" type="password" name="password" placeholder="Password">
-      <input class="btn alert-default space-bottom-large" type="password" name="confirm_password" placeholder="Re-enter Password">
-      <input class="btn alert-default space-bottom-large" type="text" name="token" placeholder="Invite Code">
-      <button class="btn alert-high" type="submit" name="signup"><img class="svg" src="../assets/icons/sign-in.svg">Sign Up</button>
+  <div class="signup-root">
+    <h2>Make account</h2>
+    <p>And amazing things happened here...</p>
+    <br>
+    <form method="POST" action="signup.php" enctype="multipart/form-data">
+      <input class="btn btn-neutral" type="text" name="username" placeholder="Username">
+      <br>
+      <input class="btn btn-neutral" type="password" name="password" placeholder="Password">
+      <input class="btn btn-neutral" type="password" name="confirm_password" placeholder="Re-enter Password">
+      <br>
+      <input class="btn btn-neutral" type="text" name="token" placeholder="Invite Code">
+      <br>
+      <button class="btn btn-good" type="submit" name="signup"><img class="svg" src="../assets/icons/sign-in.svg">Sign Up</button>
     </form>
   </div>
 
diff --git a/css/footer.css b/css/footer.css
deleted file mode 100644
index 5b03cac..0000000
--- a/css/footer.css
+++ /dev/null
@@ -1,20 +0,0 @@
-/*
-  -=-=-= FOOTER =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-*/
-footer {
-  margin: 0; padding: 0.5rem;
-
-  width: calc(100vh - 2rem));
-
-  background-color: var(--bg-3); color: var(--fg);
-
-  border: 0.2rem solid var(--green);
-  /*outline: 0.5rem solid var(--bg);*/
-
-  border-radius: var(--rad);
-  box-shadow: var(--shadow);
-}
-
-footer a {
-  margin: 0.5rem;
-}
diff --git a/css/main.css b/css/main.css
index efd3e3f..b9a4f3f 100644
--- a/css/main.css
+++ b/css/main.css
@@ -12,25 +12,27 @@
   --bg-1: #242621;
   --bg-2: #1D1E1C;
   --bg-3: #151515;
-  --fg:#E8E3E3;
+  --fg: #E8E3E3;
   --fg-dark: #151515;
   --red: #B66467;
   --orange: #FF7700;
   --green: #8C977D;
   --black: #151515;
   --white: #E8E3E3;
-  --shadow: 6px 6px 2px #15151588;
-  --rad: 0px;
-  --square: 33.33%;
 }
 
+/*
+ |-------------------------------------------------------------
+ | NAVIGATION BAR
+ |-------------------------------------------------------------
+*/
 nav {
   margin-bottom: 1rem;
   padding: 0.5rem;
   width: calc(100% - 1.4rem);
   background-color: #151515;
   color: #E8E3E3;
-  border-radius: 0;
+  border-radius: 0rem;
   border: 0.2rem solid #8C977D;
   box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
   display: flex;
@@ -111,6 +113,10 @@ nav .btn {
     -webkit-backdrop-filter: blur(16px);
             backdrop-filter: blur(16px);
   }
+  nav .svg {
+    margin: 0;
+    display: block;
+  }
   .nav-hide {
     display: none;
   }
@@ -134,10 +140,17 @@ nav .btn {
   padding: 0;
   text-align: center;
 }
-.info-text h1, .info-text h2, .info-text h3, .info-text h4, .info-text h5 {
+.info-text h1,
+.info-text h2,
+.info-text h3,
+.info-text h4,
+.info-text h5 {
   font-family: "Lexend Deca", sans-serif;
 }
-.info-text p, .info-text a, .info-text button, .info-text input {
+.info-text p,
+.info-text a,
+.info-text button,
+.info-text input {
   font-family: "Secular One", sans-serif;
 }
 .info-text h1 {
@@ -160,7 +173,7 @@ nav .btn {
   flex-direction: row;
   flex-wrap: wrap;
   border: 0.2rem solid #8C977D;
-  border-radius: 0;
+  border-radius: 0rem;
   box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
 }
 
@@ -170,7 +183,7 @@ nav .btn {
   height: auto;
   max-width: calc(33.33% - 0.5rem);
   background-color: #151515;
-  border-radius: 0;
+  border-radius: -0.5rem;
   position: relative;
   flex: 1 0 150px;
   transition: transform 0.15s cubic-bezier(0.19, 1, 0.22, 1);
@@ -178,7 +191,7 @@ nav .btn {
 .gallery-item:hover {
   transform: scale(1.1) rotate(5deg);
   box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
-  z-index: 999;
+  z-index: 9;
 }
 .gallery-item:after {
   content: "";
@@ -200,7 +213,7 @@ nav .btn {
      object-fit: cover;
   -o-object-position: center;
      object-position: center;
-  border-radius: 0;
+  border-radius: -0.5rem;
 }
 
 /*
@@ -218,7 +231,7 @@ nav .btn {
   background-color: rgba(21, 21, 21, 0.7333333333);
   -webkit-backdrop-filter: blur(8px);
           backdrop-filter: blur(8px);
-  border-radius: 0;
+  border-radius: 0rem;
   transition: max-height 0.15s cubic-bezier(0.19, 1, 0.22, 1);
 }
 
@@ -233,21 +246,16 @@ nav .btn {
   width: auto;
   max-height: inherit;
   height: auto;
-  border-radius: 0;
+  border-radius: 0rem;
 }
 
-/*
- |-------------------------------------------------------------
- | DESCRIPTION
- |-------------------------------------------------------------
-*/
 .image-description {
   margin-bottom: 1rem;
   padding: 0.5rem;
   width: calc(100% - 1.4rem);
   background-color: #151515;
   color: #E8E3E3;
-  border-radius: 0;
+  border-radius: 0rem;
   border: 0.2rem solid #8C977D;
   box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
 }
@@ -255,25 +263,27 @@ nav .btn {
   margin-top: 0;
   margin-bottom: 0.5rem;
 }
-.image-description h1, .image-description h2, .image-description h3, .image-description h4, .image-description h5 {
+.image-description h1,
+.image-description h2,
+.image-description h3,
+.image-description h4,
+.image-description h5 {
   font-family: "Lexend Deca", sans-serif;
 }
-.image-description p, .image-description a, .image-description button, .image-description input {
+.image-description p,
+.image-description a,
+.image-description button,
+.image-description input {
   font-family: "Secular One", sans-serif;
 }
 
-/*
- |-------------------------------------------------------------
- | DETAILS
- |-------------------------------------------------------------
-*/
 .image-detail {
   margin-bottom: 1rem;
   padding: 0.5rem;
   width: calc(100% - 1.4rem);
   background-color: #151515;
   color: #E8E3E3;
-  border-radius: 0;
+  border-radius: 0rem;
   border: 0.2rem solid #8C977D;
   box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
 }
@@ -281,25 +291,27 @@ nav .btn {
   margin-top: 0;
   margin-bottom: 0.5rem;
 }
-.image-detail h1, .image-detail h2, .image-detail h3, .image-detail h4, .image-detail h5 {
+.image-detail h1,
+.image-detail h2,
+.image-detail h3,
+.image-detail h4,
+.image-detail h5 {
   font-family: "Lexend Deca", sans-serif;
 }
-.image-detail p, .image-detail a, .image-detail button, .image-detail input {
+.image-detail p,
+.image-detail a,
+.image-detail button,
+.image-detail input {
   font-family: "Secular One", sans-serif;
 }
 
-/*
- |-------------------------------------------------------------
- | TAGS
- |-------------------------------------------------------------
-*/
 .tags-root {
   margin-bottom: 1rem;
   padding: 0.5rem;
   width: calc(100% - 1.4rem);
   background-color: #151515;
   color: #E8E3E3;
-  border-radius: 0;
+  border-radius: 0rem;
   border: 0.2rem solid #8C977D;
   box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
 }
@@ -307,10 +319,17 @@ nav .btn {
   margin-top: 0;
   margin-bottom: 0.5rem;
 }
-.tags-root h1, .tags-root h2, .tags-root h3, .tags-root h4, .tags-root h5 {
+.tags-root h1,
+.tags-root h2,
+.tags-root h3,
+.tags-root h4,
+.tags-root h5 {
   font-family: "Lexend Deca", sans-serif;
 }
-.tags-root p, .tags-root a, .tags-root button, .tags-root input {
+.tags-root p,
+.tags-root a,
+.tags-root button,
+.tags-root input {
   font-family: "Secular One", sans-serif;
 }
 
@@ -326,22 +345,17 @@ nav .btn {
   padding: 0.5rem;
   display: block;
   background-color: #8C977D;
-  border-radius: 0;
+  border-radius: 0rem;
   font-family: "Secular One", sans-serif;
 }
 
-/*
- |-------------------------------------------------------------
- | DANGER ZONE
- |-------------------------------------------------------------
-*/
 .danger-zone {
   margin-bottom: 1rem;
   padding: 0.5rem;
   width: calc(100% - 1.4rem);
   background-color: #151515;
   color: #E8E3E3;
-  border-radius: 0;
+  border-radius: 0rem;
   border: 0.2rem solid #B66467;
   box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
 }
@@ -349,20 +363,235 @@ nav .btn {
   margin-top: 0;
   margin-bottom: 0.5rem;
 }
-.danger-zone h1, .danger-zone h2, .danger-zone h3, .danger-zone h4, .danger-zone h5 {
+.danger-zone h1,
+.danger-zone h2,
+.danger-zone h3,
+.danger-zone h4,
+.danger-zone h5 {
   font-family: "Lexend Deca", sans-serif;
 }
-.danger-zone p, .danger-zone a, .danger-zone button, .danger-zone input {
+.danger-zone p,
+.danger-zone a,
+.danger-zone button,
+.danger-zone input {
   font-family: "Secular One", sans-serif;
 }
 
+/*
+ |-------------------------------------------------------------
+ | ABOUT
+ |-------------------------------------------------------------
+*/
+.about-root {
+  margin-bottom: 1rem;
+  padding: 0.5rem;
+  width: calc(100% - 1.4rem);
+  background-color: #151515;
+  color: #E8E3E3;
+  border-radius: 0rem;
+  border: 0.2rem solid #8C977D;
+  box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
+}
+.about-root > * {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+.about-root h1,
+.about-root h2,
+.about-root h3,
+.about-root h4,
+.about-root h5 {
+  font-family: "Lexend Deca", sans-serif;
+}
+.about-root p,
+.about-root a,
+.about-root button,
+.about-root input {
+  font-family: "Secular One", sans-serif;
+}
+
+/*
+ |-------------------------------------------------------------
+ | UPLOAD
+ |-------------------------------------------------------------
+*/
+.upload-root {
+  margin-bottom: 1rem;
+  padding: 0.5rem;
+  width: calc(100% - 1.4rem);
+  background-color: #151515;
+  color: #E8E3E3;
+  border-radius: 0rem;
+  border: 0.2rem solid #8C977D;
+  box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
+}
+.upload-root > * {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+.upload-root h1,
+.upload-root h2,
+.upload-root h3,
+.upload-root h4,
+.upload-root h5 {
+  font-family: "Lexend Deca", sans-serif;
+}
+.upload-root p,
+.upload-root a,
+.upload-root button,
+.upload-root input {
+  font-family: "Secular One", sans-serif;
+}
+
+/*
+ |-------------------------------------------------------------
+ | ACCOUNT
+ |-------------------------------------------------------------
+*/
+.account-root {
+  margin-bottom: 1rem;
+  padding: 0.5rem;
+  width: calc(100% - 1.4rem);
+  background-color: #151515;
+  color: #E8E3E3;
+  border-radius: 0rem;
+  border: 0.2rem solid #8C977D;
+  box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
+}
+.account-root > * {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+.account-root h1,
+.account-root h2,
+.account-root h3,
+.account-root h4,
+.account-root h5 {
+  font-family: "Lexend Deca", sans-serif;
+}
+.account-root p,
+.account-root a,
+.account-root button,
+.account-root input {
+  font-family: "Secular One", sans-serif;
+}
+.account-root p:first-of-type {
+  padding: 0.5rem;
+  background-color: #151515;
+  text-align: center;
+}
+
+/*
+ |-------------------------------------------------------------
+ | SIGNUP
+ |-------------------------------------------------------------
+*/
+.signup-root {
+  margin-bottom: 1rem;
+  padding: 0.5rem;
+  width: calc(100% - 1.4rem);
+  background-color: #151515;
+  color: #E8E3E3;
+  border-radius: 0rem;
+  border: 0.2rem solid #8C977D;
+  box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
+}
+.signup-root > * {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+.signup-root h1,
+.signup-root h2,
+.signup-root h3,
+.signup-root h4,
+.signup-root h5 {
+  font-family: "Lexend Deca", sans-serif;
+}
+.signup-root p,
+.signup-root a,
+.signup-root button,
+.signup-root input {
+  font-family: "Secular One", sans-serif;
+}
+
+/*
+ |-------------------------------------------------------------
+ | LOGIN
+ |-------------------------------------------------------------
+*/
+.login-root {
+  margin-bottom: 1rem;
+  padding: 0.5rem;
+  width: calc(100% - 1.4rem);
+  background-color: #151515;
+  color: #E8E3E3;
+  border-radius: 0rem;
+  border: 0.2rem solid #8C977D;
+  box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
+}
+.login-root > * {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+.login-root h1,
+.login-root h2,
+.login-root h3,
+.login-root h4,
+.login-root h5 {
+  font-family: "Lexend Deca", sans-serif;
+}
+.login-root p,
+.login-root a,
+.login-root button,
+.login-root input {
+  font-family: "Secular One", sans-serif;
+}
+
+/*
+ |-------------------------------------------------------------
+ | PASSWORD RESET
+ |-------------------------------------------------------------
+*/
+.password-reset-root {
+  margin-bottom: 1rem;
+  padding: 0.5rem;
+  width: calc(100% - 1.4rem);
+  background-color: #151515;
+  color: #E8E3E3;
+  border-radius: 0rem;
+  border: 0.2rem solid #B66467;
+  box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
+}
+.password-reset-root > * {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+.password-reset-root h1,
+.password-reset-root h2,
+.password-reset-root h3,
+.password-reset-root h4,
+.password-reset-root h5 {
+  font-family: "Lexend Deca", sans-serif;
+}
+.password-reset-root p,
+.password-reset-root a,
+.password-reset-root button,
+.password-reset-root input {
+  font-family: "Secular One", sans-serif;
+}
+
+/*
+ |-------------------------------------------------------------
+ | FOOTER
+ |-------------------------------------------------------------
+*/
 footer {
   margin-bottom: 1rem;
   padding: 0.5rem;
   width: calc(100% - 1.4rem);
   background-color: #151515;
   color: #E8E3E3;
-  border-radius: 0;
+  border-radius: 0rem;
   border: 0.2rem solid #8C977D;
   box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333);
   display: flex;
@@ -435,9 +664,8 @@ body * {
   font-weight: 500;
   font-family: "Secular One", sans-serif;
   text-decoration: none;
-  text-align: center;
   border: none;
-  border-radius: 0;
+  border-radius: calc(0rem - (0.5rem + 3px));
   transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
 }
 .btn:hover {
@@ -445,24 +673,28 @@ body * {
   color: #E8E3E3;
 }
 .btn:where(input[type=file])::-webkit-file-upload-button {
-  margin: -0.5rem 0.5rem -0.5rem -0.5rem;
+  margin: -0.25rem 0.5rem -0.25rem -0.25rem;
   padding: 0.5rem;
   display: inline-block;
   font-size: 16px;
   text-decoration: none;
   background-color: #E8E3E3;
   border: none;
-  border-radius: 0;
+  border-radius: 0rem;
 }
 .btn:where(input[type=file])::file-selector-button {
-  margin: -0.5rem 0.5rem -0.5rem -0.5rem;
+  margin: -0.25rem 0.5rem -0.25rem -0.25rem;
   padding: 0.5rem;
   display: inline-block;
   font-size: 16px;
   text-decoration: none;
   background-color: #E8E3E3;
   border: none;
-  border-radius: 0;
+  border-radius: 0rem;
+}
+
+a.btn {
+  text-align: center;
 }
 
 .btn-good {
@@ -486,6 +718,9 @@ form {
   width: 100%;
   box-sizing: content-box;
 }
+form > * {
+  margin-bottom: 0.5rem;
+}
 
 /*
  |-------------------------------------------------------------
@@ -500,6 +735,16 @@ form {
   display: inline;
 }
 
+/*
+ |-------------------------------------------------------------
+ | BR / BREAK
+ |-------------------------------------------------------------
+*/
+br {
+  margin: 0;
+  line-height: 0.25rem;
+}
+
 /*
  |-------------------------------------------------------------
  | BACK TO TOP
diff --git a/css/main.css.map b/css/main.css.map
index b9e3e23..278061d 100644
--- a/css/main.css.map
+++ b/css/main.css.map
@@ -1 +1 @@
-{"version":3,"sources":["main.scss","scss/_variables.scss","main.css","scss/_navigation.scss","scss/_mixin.scss","scss/_body.scss","scss/_footer.scss"],"names":[],"mappings":"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","file":"main.css"}
\ No newline at end of file
+{"version":3,"sources":["main.scss","scss/_variables.scss","main.css","scss/_navigation.scss","scss/_mixin.scss","scss/_body.scss","scss/_footer.scss"],"names":[],"mappings":"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I,mBAAA;EACA,eAAA;EAEA,0BAAA;EAEA,yBHNC;EGOD,cHJC;EGMD,mBHME;EGLF,4BAAA;EAEA,sDHEK;ACwST;AExSI;EACI,aAAA;EACA,qBAAA;AF0SR;AEpSI;;;;;EAKI,sCHPM;AC6Sd;AEnSI;;;;EAII,sCHZI;ACiTZ;;AG7KA;ED3GI,aAAA;EAEA,mBAAA;EAEA,eAAA;EAEA,qBCsGkB;AHmLtB;;AGhLA;EACI,eAAA;EACA,eAAA;EAEA,cAAA;EAEA,yBJxJU;EI0JV,mBJvJE;EIyJF,sCJlJQ;ACiUZ;;AG3KA;ED3KI,mBAAA;EACA,eAAA;EAEA,0BAAA;EAEA,yBHNC;EGOD,cHJC;EGMD,mBHME;EGLF,4BAAA;EAEA,sDHEK;ACoVT;AEpVI;EACI,aAAA;EACA,qBAAA;AFsVR;AEhVI;;;;;EAKI,sCHPM;ACyVd;AE/UI;;;;EAII,sCHZI;AC6VZ;;AGlMA;;;;CAAA;AAKA;EDrLI,mBAAA;EACA,eAAA;EAEA,0BAAA;EAEA,yBHNC;EGOD,cHJC;EGMD,mBHME;EGLF,4BAAA;EAEA,sDHEK;ACqXT;AErXI;EACI,aAAA;EACA,qBAAA;AFuXR;AEjXI;;;;;EAKI,sCHPM;AC0Xd;AEhXI;;;;EAII,sCHZI;AC8XZ;;AGzNA;;;;CAAA;AAKA;ED/LI,mBAAA;EACA,eAAA;EAEA,0BAAA;EAEA,yBHNC;EGOD,cHJC;EGMD,mBHME;EGLF,4BAAA;EAEA,sDHEK;ACsZT;AEtZI;EACI,aAAA;EACA,qBAAA;AFwZR;AElZI;;;;;EAKI,sCHPM;AC2Zd;AEjZI;;;;EAII,sCHZI;AC+ZZ;;AGhPA;;;;CAAA;AAKA;EDzMI,mBAAA;EACA,eAAA;EAEA,0BAAA;EAEA,yBHNC;EGOD,cHJC;EGMD,mBHME;EGLF,4BAAA;EAEA,sDHEK;ACubT;AEvbI;EACI,aAAA;EACA,qBAAA;AFybR;AEnbI;;;;;EAKI,sCHPM;AC4bd;AElbI;;;;EAII,sCHZI;ACgcZ;AGxQC;EACC,eAAA;EAEA,yBJxMM;EI0MN,kBAAA;AHwQF;;AGpQA;;;;CAAA;AAKA;ED3NI,mBAAA;EACA,eAAA;EAEA,0BAAA;EAE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","file":"main.css"}
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index aca35b0..9aaf20e 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -20,39 +20,42 @@
  |-------------------------------------------------------------
 */
 html {
-	margin: 0; padding: 0;
+    margin: 0;
+    padding: 0;
 
-	min-height: 100vh; max-width: 100vw;
+    min-height: 100vh;
+    max-width: 100vw;
 
-	position: relative;
+    position: relative;
 
-	background-color: $bg;
-	background-image: url("../assets/bg.svg");
+    background-color: $bg;
+    background-image: url("../assets/bg.svg");
 
-	background-position: center;
-	background-size: cover;
-	background-repeat: no-repeat;
-	background-attachment: fixed;
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-attachment: fixed;
 
-	scroll-behavior: smooth;
+    scroll-behavior: smooth;
 
-	overflow: auto;
+    overflow: auto;
 }
 
 body {
-	margin: 0 auto; padding: 1rem;
+    margin: 0 auto;
+    padding: 1rem;
 
-	max-width: 1000px;
+    max-width: 1000px;
 
-	min-height: calc(100vh - 2rem);
+    min-height: calc(100vh - 2rem);
 
-	@include flexDown(space-between);
+    @include flexDown(space-between);
 
-	position: relative;
+    position: relative;
 
-	* {
-		color: $fg;
-	}
+    * {
+        color: $fg;
+    }
 }
 
 /*
@@ -61,54 +64,60 @@ body {
  |-------------------------------------------------------------
 */
 .btn {
-	padding: 0.5rem;
+    padding: 0.5rem;
 
-	width: 100%;
+    width: 100%;
 
-	display: block;
-	box-sizing: border-box;
+    display: block;
+    box-sizing: border-box;
 
-	font-size: 16px;
-	font-weight: 500;
-	font-family: $font-body;
+    font-size: 16px;
+    font-weight: 500;
+    font-family: $font-body;
 
-	text-decoration: none;
-	text-align: center;
+    text-decoration: none;
 
-	border: none;
-	border-radius: $rad;
+    border: none;
+    border-radius: calc($rad - (0.5rem + 3px));
 
-	transition: outline 0.1s cubic-bezier(.19,1,.22,1);
+    transition: outline 0.1s cubic-bezier(.19, 1, .22, 1);
 
-	&:hover {
-		outline: $white 3px solid;
-		color: $fg;
-	}
+    &:hover {
+        outline: $white 3px solid;
+        color: $fg;
+    }
 
-	&:where(input[type="file"])::file-selector-button {
-		margin: -0.5rem 0.5rem -0.5rem -0.5rem;
-		padding: 0.5rem;
-	
-		display: inline-block;
-	
-		font-size: 16px;
-	
-		text-decoration: none;
-	
-		background-color: $white;
-	
-		border: none;
-		border-radius: $rad;
-	}
+    &:where(input[type="file"])::file-selector-button {
+        margin: -0.25rem 0.5rem -0.25rem -0.25rem;
+        padding: 0.5rem;
+
+        display: inline-block;
+
+        font-size: 16px;
+
+        text-decoration: none;
+
+        background-color: $white;
+
+        border: none;
+        border-radius: $rad;
+    }
 }
+
+a.btn {
+    text-align: center;
+}
+
 .btn-good {
-	background-color: $green;
+    background-color: $green;
 }
+
 .btn-bad {
-	background-color: $red;
+    background-color: $red;
 }
+
 .btn-neutral {
-	background-color: $black;
+    background-color: $black;
 }
 
 /*
@@ -117,8 +126,12 @@ body {
  |-------------------------------------------------------------
 */
 form {
-	width: 100%;
-	box-sizing: content-box;
+    width: 100%;
+    box-sizing: content-box;
+
+    >* {
+        margin-bottom: 0.5rem;
+    }
 }
 
 /*
@@ -127,13 +140,25 @@ form {
  |-------------------------------------------------------------
 */
 .svg {
-	margin: 0 0.2rem 0.1rem 0;
+    margin: 0 0.2rem 0.1rem 0;
 
-	width: 19px; height: 18px;
+    width: 19px;
+    height: 18px;
 
-	vertical-align: middle;
+    vertical-align: middle;
 
-	display: inline;
+    display: inline;
+}
+
+/*
+ |-------------------------------------------------------------
+ | BR / BREAK
+ |-------------------------------------------------------------
+*/
+br {
+    margin: 0;
+
+    line-height: 0.25rem;
 }
 
 /*
@@ -142,31 +167,36 @@ form {
  |-------------------------------------------------------------
 */
 #back-to-top {
-	margin: 0; padding: 0.5rem;
-  
-	position: fixed; z-index: 99;
-	right: -2.5rem; bottom: 1rem;
-  
-	object-position: center;
-  
-	background-color: $bg;
-	backdrop-filter: blur(8px);
-  
-	border-radius: 50%;
-	box-shadow: $shadow;
-  
-	transition: right 0.15s cubic-bezier(.19,1,.22,1);
+    margin: 0;
+    padding: 0.5rem;
 
-	&:hover {
-		outline: 0.2rem solid $green;
-	}
+    position: fixed;
+    z-index: 99;
+    right: -2.5rem;
+    bottom: 1rem;
 
-	* {
-		margin: 0; padding: 0;
-		width: 1.5rem; height: 1.5rem;
-	  
-		display: block;
-	  
-		object-position: center;
-	}
+    object-position: center;
+
+    background-color: $bg;
+    backdrop-filter: blur(8px);
+
+    border-radius: 50%;
+    box-shadow: $shadow;
+
+    transition: right 0.15s cubic-bezier(.19, 1, .22, 1);
+
+    &:hover {
+        outline: 0.2rem solid $green;
+    }
+
+    * {
+        margin: 0;
+        padding: 0;
+        width: 1.5rem;
+        height: 1.5rem;
+
+        display: block;
+
+        object-position: center;
+    }
 }
\ No newline at end of file
diff --git a/css/master.css b/css/master.css
deleted file mode 100644
index 194a98a..0000000
--- a/css/master.css
+++ /dev/null
@@ -1,447 +0,0 @@
-/*
-  Normalize CSS
-
-  This ensures that the website looks the same across all devices
-  and browsers, regardless if I waisted my time making a tag look
-  good or not
-
-@import "normalize.css";
-*/
-
-
-@import "nav.css";
-@import "footer.css";
-
-:root {
-  --bg: #151515bb;
-  --bg-1: #242621;
-  --bg-2: #1D1E1C;
-  --bg-3: #151515;
-
-  --fg:#E8E3E3;
-  --fg-dark: #151515;
-
-  --red: #B66467;
-  --orange: #FF7700;
-  --green: #8C977D;
-  --black: #151515;
-  --white: #E8E3E3;
-
-  --shadow: 6px 6px 2px #15151588;
-  --rad: 0px;
-
-  --square: 33.33%;
-}
-
-* {
-  font-weight: 500;
-  color: var(--fg);
-  font-family: 'Secular One', sans-serif;
-}
-html {
-  margin: 0; padding: 0;
-
-  min-height: 100vh; max-width: 100vw;
-
-  position: relative;
-
-  background-color: var(--bg-3);
-  background-image: url("../assets/bg.svg");
-
-  background-position: center;
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-attachment: fixed;
-
-  scroll-behavior: smooth;
-
-  overflow: auto;
-}
-body {
-  margin: 0 auto; padding: 1rem;
-
-  min-height: calc(100vh - 2rem); max-width: 1000px;
-
-  display: flex;
-
-  position: relative;
-
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-/*
-  -=-=-= BACK TO TOP BUTTON =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-*/
-#back-to-top {
-  margin: 0; padding: 0.5rem;
-
-  position: fixed; z-index: 99;
-  right: -2.5rem; bottom: 1rem;
-
-  object-position: center;
-
-  background-color: var(--bg);
-  backdrop-filter: blur(8px);
-
-  border-radius: 50%;
-  box-shadow: var(--shadow);
-
-  transition: right 0.15s cubic-bezier(.19,1,.22,1);
-}
-#back-to-top:hover {
-  outline: 0.2rem solid var(--green);
-}
-
-#back-to-top * {
-  margin: 0; padding: 0;
-  width: 1.5rem; height: 1.5rem;
-
-  display: block;
-
-  object-position: center;
-}
-
-/*
-  -=-=-= DIV DECORATIONS =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-*/
-.default-window {
-  margin: 0 0 1rem; padding: 0.5rem;
-
-  width: auto;
-
-  background-color: var(--bg-3);
-
-  /*outline: 0.5rem solid var(--bg);*/
-
-  border-radius: var(--rad);
-  box-shadow: var(--shadow);
-}
-
-.password-reset-root {
-  border: 0.2rem solid var(--red);
-}
-.edit-root {
-  border: 0.2rem solid var(--red);
-}
-
-.upload-root {
-  border: 0.2rem solid var(--green);
-}
-.signup-root {
-  border: 0.2rem solid var(--green);
-}
-.account-root {
-  border: 0.2rem solid var(--green);
-}
-.login-root {
-  border: 0.2rem solid var(--green);
-}
-.about-root {
-  border: 0.2rem solid var(--green);
-}
-
-/*
-  -=-=-= GALLERY =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-*/
-.info-text {
-  margin: 0 0 2rem;
-}
-
-.gallery-root {
-  margin: 0 0 2rem; padding: 0.25rem;
-
-  background-color: var(--bg-3); color: var(--fg);
-
-  border: 0.2rem solid var(--green);
-  /*outline: 0.5rem solid var(--bg);*/
-
-  border-radius: var(--rad);
-  box-shadow: var(--shadow);
-}
-
-.gallery-item {
-  margin: 0.25rem; padding: 0;
-
-  height: auto; max-width: calc(33.33% - 0.5rem); /*max-width: 350px;*/
-
-  background-color: var(--bg-2);
-  border-radius: var(--rad);
-
-  position: relative;
-
-  flex: 1 0 150px;
-
-  transition: transform 0.15s cubic-bezier(.19,1,.22,1);
-}
-.gallery-item:hover {
-  transform: scale(1.1) rotate(5deg);
-  box-shadow: var(--shadow);
-
-  z-index: 999;
-}
-.gallery-item:after {
-  content: "";
-  display: block;
-  padding-bottom: 100%;
-}
-
-.gallery-image {
-  margin: 0; padding: 0;
-
-  width: 100%; height: 100%;
-
-  top: 0; bottom: 0; left: 0; right: 0;
-
-  position: absolute;
-
-  object-fit: cover;
-  object-position: center;
-
-  border-radius: var(--rad);
-}
-
-/*
-  -=-=-= IMAGE FULLSCREEN =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-*/
-.image-container {
-  /*padding: 0.5rem;*/
-  width: calc(100vw - var(--space-medium));
-  max-height: 69vh; height: auto;
-
-  position: relative;
-  display: flex;
-
-  background-color: var(--bg);
-  backdrop-filter: blur(8px);
-  /*outline: 0.5rem solid var(--bg);*/
-
-  border-radius: var(--rad);
-
-  transition: max-height 0.15s cubic-bezier(.19,1,.22,1);
-}
-
-@media (max-width: 600px) {
-  .image-container {
-    max-height: 35vh;
-  }
-}
-
-.image {
-  margin: 0 auto;
-
-  max-width: 100%; width: auto;
-  max-height: inherit; height: auto;
-
-  border-radius: var(--rad);
-}
-
-.image-description {
-  border: 0.2rem solid var(--green);
-
-  word-wrap: break-word;
-}
-.image-detail {
-  border: 0.2rem solid var(--green);
-}
-.danger-zone {
-  border: 0.2rem solid var(--red);
-}
-
-.tags-root {
-  border: 0.2rem solid var(--green);
-}
-.tag {
-  margin: 0.25rem; padding: 0.5rem;
-
-  display: block;
-
-  border-radius: var(--rad);
-}
-
-/*
-  -=-=-= UNIVERSAL =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-*/
-.flex-left {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-.flex-down {
-  display: flex;
-  flex-direction: column;
-}
-
-.between {
-  justify-content: space-between;
-}
-.around {
-  justify-content: space-around;
-}
-.center {
-  text-align: center;
-}
-
-.space-bottom-small {
-  margin-bottom: 0.5rem;
-  margin-top: 0;
-}
-.space-top-small {
-  margin-top: 0.5rem;
-  margin-bottom: 0;
-}
-.space-bottom {
-  margin-bottom: 1rem;
-  margin-top: 0;
-}
-.space-top {
-  margin-top: 1rem;
-  margin-bottom: 0;
-}
-.space-bottom-large {
-  margin-bottom: 2rem;
-}
-.space-top-large {
-  margin-top: 2rem;
-}
-
-.svg {
-  margin: 0 0.2rem 0.1rem 0;
-  width: 19px; height: 18px;
-
-  vertical-align: middle;
-
-  display: inline;
-}
-
-.text-box {
-  padding: 0.5rem;
-
-  display: block;
-
-  font-size: 16px;
-
-  text-decoration: none;
-
-  border: none;
-  border-radius: var(--rad);
-}
-
-/*
-  -=-=-= ALERT =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-*/
-.alert {
-  padding: 0.69rem;
-
-  width: auto;
-
-  text-align: center;
-
-  display: block;
-
-  border-radius: var(--rad);
-
-  outline: 0.5rem solid var(--bg);
-
-  transition: transform 1s cubic-bezier(.19,1,.22,1), opacity 0.2s cubic-bezier(.19,1,.22,1);
-}
-.alert:hover {
-  transform: scale(1.05);
-  cursor: pointer;
-}
-
-.alert-high {
-  background-color: var(--green);
-}
-.alert-low {
-  background-color: var(--red);
-}
-.alert-default {
-  background-color: var(--black);
-}
-
-/*
-  -=-=-= FORM =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-*/
-form {
-  width: 100%;
-  box-sizing: border-box;
-}
-form * {
-  width: 100%;
-  box-sizing: border-box;
-}
-
-/*
-  -=-=-= BUTTONS =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-*/
-.btn {
-  padding: 0.5rem;
-
-  display: block;
-
-  font-size: 16px;
-  font-weight: 500;
-
-  text-decoration: none;
-
-  border: none;
-  border-radius: var(--rad);
-
-  transition: outline 0.1s cubic-bezier(.19,1,.22,1);
-}
-.btn:hover {
-  outline: var(--white) 3px solid;
-  color: var(--fg);
-}
-a.btn {
-  margin-bottom: 0;
-  text-align: center;
-}
-
-.btn:where(input[type="file"])::file-selector-button {
-  margin: -0.5rem 0.5rem -0.5rem -0.5rem;
-  padding: 0.5rem;
-
-  display: inline-block;
-
-  font-size: 16px;
-
-  text-decoration: none;
-
-  background-color: var(--white);
-
-  border: none;
-  border-radius: var(--rad);
-}
-
-/*
-  -=-=-= FONT SIZES =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-*/
-h1, h2, h3, h4 {
-  margin: 0 0 0.5rem 0;
-  font-family: "Lexend Deca", sans-serif;
-}
-h1 {
-  font-size: 30px;
-}
-h2 {
-  font-size: 27px;
-}
-h3 {
-  font-size: 24px;
-}
-h4 {
-  font-size: 21px;
-}
-
-p, a {
-  margin: 0 0 0.5rem 0;
-  font-family: 'Secular One', sans-serif;
-}
-a {
-  text-decoration: none;
-}
-a:hover {
-  color: var(--orange);
-}
diff --git a/css/nav.css b/css/nav.css
deleted file mode 100644
index 3c41946..0000000
--- a/css/nav.css
+++ /dev/null
@@ -1,91 +0,0 @@
-/*
-  -=-=-= NAV =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
-*/
-nav {
-  margin: 0 0 2rem; padding: 0.5rem;
-
-  width: calc(100vh - 2rem)); height: 2.5rem;
-
-  position: static; z-index: 99;
-  top: 1rem;
-
-  align-items: center;
-  vertical-align: middle;
-
-  background-color: var(--bg-3); color: var(--fg);
-
-  border: 0.2rem solid var(--green);
-  /*outline: 0.5rem solid var(--bg);*/
-
-  border-radius: var(--rad);
-  box-shadow: var(--shadow);
-}
-
-nav p {
-  margin: 0;
-  vertical-align: middle;
-}
-nav hr {
-  margin: 0.5rem 0.2rem; padding: 0;
-
-  opacity: 0;
-}
-
-.nav-name *, .nav-name {
-  margin: 0;
-  
-  font-family: "Lexend Deca", sans-serif;
-
-  font-size: 22px;
-
-  display: block;
-}
-.nav-links {
-  width: auto;
-  justify-content: space-between;
-}
-@media (max-width: 800px) {
-  .nav-name p, .nav-name hr, .nav-name {
-    display: none;
-  }
-  .nav-links {
-    width: 100%;
-    justify-content: space-around;
-  }
-}
-
-@media (max-width: 550px) {
-  nav {
-    margin: 0;
-
-    width: calc(100vw - 2rem)); height: 3rem;
-
-    position: fixed;
-    top: auto; bottom: 0; left: 0; right: 0;
-
-    background-color: var(--bg);
-    backdrop-filter: blur(8px);
-
-    border: none;
-    border-top: 3px solid var(--green);
-    border-radius: 0;
-
-    backdrop-filter: blur(16px);
-  }
-  .nav-hide {
-    display: none;
-  }
-  .nav-links a .svg {
-    margin: 0;
-  }
-
-  footer {
-    margin-bottom: calc(4rem + 3px) !important;
-  }
-  #back-to-top {
-    bottom: 5rem !important;
-  }
-  nav .svg {
-    padding: 0.35rem !important;
-  }
-}
diff --git a/css/scss/_body.scss b/css/scss/_body.scss
index 1cd8e50..999f085 100644
--- a/css/scss/_body.scss
+++ b/css/scss/_body.scss
@@ -4,82 +4,93 @@
  |-------------------------------------------------------------
 */
 .info-text {
-	@include defaultFont();
+    @include defaultFont();
 
-	margin: 1rem 0 1rem 0.5rem; padding: 0;
+    margin: 1rem 0 1rem 0.5rem;
+    padding: 0;
 
-	text-align: center;
+    text-align: center;
 
-	h1 {
-		font-family: $font-header;
+    h1 {
+        font-family: $font-header;
 
-		margin-top: 0;
-		margin-bottom: 1rem;
-	}
-	p {
-		font-family: $font-body;
+        margin-top: 0;
+        margin-bottom: 1rem;
+    }
 
-		margin-top: 0;
-		margin-bottom: 1rem;
-	}
+    p {
+        font-family: $font-body;
+
+        margin-top: 0;
+        margin-bottom: 1rem;
+    }
 }
 
 .gallery-root {
-	margin-bottom: 1rem; padding: 0.25rem;
-  
-	background-color: $bg; color: $fg;
+    margin-bottom: 1rem;
+    padding: 0.25rem;
 
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-  
-	border: 0.2rem solid $green;
-  
-	border-radius: $rad;
-	box-shadow: $shadow;
+    background-color: $bg;
+    color: $fg;
+
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    border: 0.2rem solid $green;
+
+    border-radius: $rad;
+    box-shadow: $shadow;
 }
 
 .gallery-item {
-	margin: 0.25rem; padding: 0;
-  
-	height: auto; max-width: calc(33.33% - 0.5rem);
-  
-	background-color: $bg;
-	border-radius: $rad;
-  
-	position: relative;
-  
-	flex: 1 0 150px;
-  
-	transition: transform 0.15s cubic-bezier(.19,1,.22,1);
+    margin: 0.25rem;
+    padding: 0;
 
-	&:hover {
-		transform: scale(1.1) rotate(5deg);
-		box-shadow: $shadow;
-	  
-		z-index: 999;
-	}
+    height: auto;
+    max-width: calc(33.33% - 0.5rem);
 
-	&:after {
-		content: "";
-		display: block;
-		padding-bottom: 100%;
-	}
+    background-color: $bg;
+    border-radius: calc($rad - 0.5rem);
+
+    position: relative;
+
+    flex: 1 0 150px;
+
+    transition: transform 0.15s cubic-bezier(.19, 1, .22, 1);
+
+    &:hover {
+        transform: scale(1.1) rotate(5deg);
+        box-shadow: $shadow;
+
+        z-index: 9;
+    }
+
+    &:after {
+        content: "";
+        display: block;
+        padding-bottom: 100%;
+    }
 }
 
 .gallery-image {
-	margin: 0; padding: 0;
-  
-	width: 100%; height: 100%;
-  
-	top: 0; bottom: 0; left: 0; right: 0;
-  
-	position: absolute;
-  
-	object-fit: cover;
-	object-position: center;
-  
-	border-radius: $rad;
+    margin: 0;
+    padding: 0;
+
+    width: 100%;
+    height: 100%;
+
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    position: absolute;
+
+    object-fit: cover;
+    object-position: center;
+
+    border-radius: calc($rad - 0.5rem);
 }
 
 /*
@@ -88,87 +99,146 @@
  |-------------------------------------------------------------
 */
 .image-container {
-	margin: 1rem 0 2rem 0; padding: 0;
+    margin: 1rem 0 2rem 0;
+    padding: 0;
 
-	width: 100%;
-	max-height: 69vh; height: auto;
+    width: 100%;
+    max-height: 69vh;
+    height: auto;
 
-	display: flex;
-  
-	background-color: $bg-alt;
-	backdrop-filter: blur(8px);
-  
-	border-radius: $rad;
-  
-	transition: max-height 0.15s cubic-bezier(.19,1,.22,1);
+    display: flex;
+
+    background-color: $bg-alt;
+    backdrop-filter: blur(8px);
+
+    border-radius: $rad;
+
+    transition: max-height 0.15s cubic-bezier(.19, 1, .22, 1);
 }
 
 @media (max-width: 600px) {
-	.image-container {
-		max-height: 42vh;
-	}
+    .image-container {
+        max-height: 42vh;
+    }
 }
 
 .image {
-	margin: 0 auto;
+    margin: 0 auto;
 
-	max-width: 100%; width: auto;
-	max-height: inherit; height: auto;
+    max-width: 100%;
+    width: auto;
+    max-height: inherit;
+    height: auto;
 
-	border-radius: $rad;
+    border-radius: $rad;
 }
 
-/*
- |-------------------------------------------------------------
- | DESCRIPTION
- |-------------------------------------------------------------
-*/
+// DESCRIPTION
 .image-description {
-	@include defaultDecoration($green);
-	@include defaultFont();
+    @include defaultDecoration($green);
+    @include defaultFont();
 }
 
 
-/*
- |-------------------------------------------------------------
- | DETAILS
- |-------------------------------------------------------------
-*/
+// DETAILS
 .image-detail {
-	@include defaultDecoration($green);
-	@include defaultFont();
+    @include defaultDecoration($green);
+    @include defaultFont();
 }
 
-/*
- |-------------------------------------------------------------
- | TAGS
- |-------------------------------------------------------------
-*/
+// TAGS
 .tags-root {
-	@include defaultDecoration($green);
-	@include defaultFont();
+    @include defaultDecoration($green);
+    @include defaultFont();
 }
+
 .tags {
-	@include flexLeft(auto);
+    @include flexLeft(auto);
 }
+
 .tag {
-	margin: 0.25rem; padding: 0.5rem;
+    margin: 0.25rem;
+    padding: 0.5rem;
 
-	display: block;
+    display: block;
 
-	background-color: $page-accent;
+    background-color: $page-accent;
 
-	border-radius: $rad;
+    border-radius: $rad;
 
-	font-family: $font-body;
+    font-family: $font-body;
+}
+
+// DANGER ZONE
+.danger-zone {
+    @include defaultDecoration($red);
+    @include defaultFont();
 }
 
 /*
  |-------------------------------------------------------------
- | DANGER ZONE
+ | ABOUT
  |-------------------------------------------------------------
 */
-.danger-zone {
-	@include defaultDecoration($red);
-	@include defaultFont();
+.about-root {
+    @include defaultDecoration($green);
+    @include defaultFont();
 }
+
+/*
+ |-------------------------------------------------------------
+ | UPLOAD
+ |-------------------------------------------------------------
+*/
+.upload-root {
+    @include defaultDecoration($green);
+    @include defaultFont();
+}
+
+/*
+ |-------------------------------------------------------------
+ | ACCOUNT
+ |-------------------------------------------------------------
+*/
+.account-root {
+    @include defaultDecoration($green);
+    @include defaultFont();
+
+	p:first-of-type {
+		padding: 0.5rem;
+
+		background-color: $black;
+
+		text-align: center;
+	}
+}
+
+/*
+ |-------------------------------------------------------------
+ | SIGNUP
+ |-------------------------------------------------------------
+*/
+.signup-root {
+    @include defaultDecoration($green);
+    @include defaultFont();
+}
+
+/*
+ |-------------------------------------------------------------
+ | LOGIN
+ |-------------------------------------------------------------
+*/
+.login-root {
+    @include defaultDecoration($green);
+    @include defaultFont();
+}
+
+/*
+ |-------------------------------------------------------------
+ | PASSWORD RESET
+ |-------------------------------------------------------------
+*/
+.password-reset-root {
+    @include defaultDecoration($red);
+    @include defaultFont();
+}
\ No newline at end of file
diff --git a/css/scss/_footer.scss b/css/scss/_footer.scss
index a837ec5..ec433c0 100644
--- a/css/scss/_footer.scss
+++ b/css/scss/_footer.scss
@@ -1,22 +1,27 @@
+/*
+ |-------------------------------------------------------------
+ | FOOTER
+ |-------------------------------------------------------------
+*/
 footer {
-	@include defaultDecoration($page-accent);
-	@include flexLeft(space-around);
+    @include defaultDecoration($page-accent);
+    @include flexLeft(space-around);
 
-	margin: 0 auto;
+    margin: 0 auto;
 
-	bottom: 0;
+    bottom: 0;
 
-	width: calc(100% - 1.4rem);
-	
-	a {
-		margin: 0.5rem;
+    width: calc(100% - 1.4rem);
 
-		text-decoration: none;
+    a {
+        margin: 0.5rem;
 
-		font-family: $font-body;
+        text-decoration: none;
 
-		&:hover {
-			color: $orange;
-		}
-	}
-}
+        font-family: $font-body;
+
+        &:hover {
+            color: $orange;
+        }
+    }
+}
\ No newline at end of file
diff --git a/css/scss/_mixin.scss b/css/scss/_mixin.scss
index 6ad889a..315f3a1 100644
--- a/css/scss/_mixin.scss
+++ b/css/scss/_mixin.scss
@@ -1,43 +1,55 @@
 @mixin defaultDecoration($border) {
-	margin-bottom: 1rem; padding: 0.5rem;
+    margin-bottom: 1rem;
+    padding: 0.5rem;
 
-	width: calc(100% - 1.4rem);
+    width: calc(100% - 1.4rem);
 
-	background-color: $bg; color: $fg;
+    background-color: $bg;
+    color: $fg;
 
-	border-radius: $rad;
+    border-radius: $rad;
     border: 0.2rem solid $border;
 
-	box-shadow: $shadow;
+    box-shadow: $shadow;
 
-	>* {
-		margin-top: 0; margin-bottom: 0.5rem;
-	}
+    >* {
+        margin-top: 0;
+        margin-bottom: 0.5rem;
+    }
 }
 
 @mixin defaultFont() {
-	h1, h2, h3, h4, h5 {
-		font-family: $font-header;
-	}
 
-	p, a, button, input {
-		font-family: $font-body;
-	}
+    h1,
+    h2,
+    h3,
+    h4,
+    h5 {
+        font-family: $font-header;
+    }
+
+    p,
+    a,
+    button,
+    input {
+        font-family: $font-body;
+    }
 }
 
 @mixin flexDown($justify) {
-	display: flex;
+    display: flex;
 
-	flex-direction: column;
+    flex-direction: column;
 
-	justify-content: $justify;
+    justify-content: $justify;
 }
+
 @mixin flexLeft($justify) {
-	display: flex;
+    display: flex;
 
-	flex-direction: row;
+    flex-direction: row;
 
-	flex-wrap: wrap;
+    flex-wrap: wrap;
 
-	justify-content: $justify;
+    justify-content: $justify;
 }
\ No newline at end of file
diff --git a/css/scss/_navigation.scss b/css/scss/_navigation.scss
index 8896e09..bc25098 100644
--- a/css/scss/_navigation.scss
+++ b/css/scss/_navigation.scss
@@ -1,89 +1,113 @@
+/*
+ |-------------------------------------------------------------
+ | NAVIGATION BAR
+ |-------------------------------------------------------------
+*/
 nav {
-	@include defaultDecoration($page-accent);
-	@include flexLeft(space-between);
+    @include defaultDecoration($page-accent);
+    @include flexLeft(space-between);
 
-	margin: 0 auto 1rem;
+    margin: 0 auto 1rem;
 
-	width: calc(100% - 1.4rem); height: 2.5rem;
+    width: calc(100% - 1.4rem);
+    height: 2.5rem;
 
-	position: sticky; z-index: 99;
-	top: 1rem;
+    position: sticky;
+    z-index: 99;
+    top: 1rem;
 
-	align-items: center;
-	vertical-align: middle;
+    align-items: center;
+    vertical-align: middle;
 
-	p {
-		margin: 0;
-		vertical-align: middle;
-	}
-	hr {
-		margin: 0.5rem 0.2rem; padding: 0;
-		opacity: 0;
-	}
-	.btn {
-		width: auto;
-	}
+    p {
+        margin: 0;
+        vertical-align: middle;
+    }
+
+    hr {
+        margin: 0.5rem 0.2rem;
+        padding: 0;
+        opacity: 0;
+    }
+
+    .btn {
+        width: auto;
+    }
 }
 
 .nav-name {
-	@include flexLeft(space-around);
+    @include flexLeft(space-around);
 
-	margin: 0;
+    margin: 0;
 
-	font-family: $font-header;
-  
-	font-size: 22px;
-  
-	display: block;
+    font-family: $font-header;
+
+    font-size: 22px;
+
+    display: block;
 }
+
 .nav-links {
-	@include flexLeft(space-around);
+    @include flexLeft(space-around);
 
-	margin: 0;
+    margin: 0;
 
-	font-family: $font-body;
+    font-family: $font-body;
 
-	width: auto;
+    width: auto;
 }
 
 @media (max-width: 800px) {
-	.nav-name {
-		display: none;
-	}
-	.nav-links {
-		width: 100%;
-	}
+    .nav-name {
+        display: none;
+    }
+
+    .nav-links {
+        width: 100%;
+    }
 }
 
 @media (max-width: 550px) {
-	nav {
-		margin: 0;
-  
-		width: calc(100% - 1rem);
-  
-		position: fixed;
-		top: auto; bottom: 0; left: 0; right: 0;
-  
-		background-color: $bg-alt;
-		backdrop-filter: blur(8px);
-  
-		border: none;
-		border-top: 3px solid $green;
-		border-radius: 0;
-  
-		backdrop-filter: blur(16px);
-	}
-	.nav-hide {
-		display: none;
-	}
-  
-	.info-text {
-		text-align: left !important;
-	}
-	footer {
-		margin-bottom: 4rem !important;
-	}
-	#back-to-top {
-		bottom: 5rem !important;
-	}
+    nav {
+        margin: 0;
+
+        width: calc(100% - 1rem);
+
+        position: fixed;
+        top: auto;
+        bottom: 0;
+        left: 0;
+        right: 0;
+
+        background-color: $bg-alt;
+        backdrop-filter: blur(8px);
+
+        border: none;
+        border-top: 3px solid $green;
+        border-radius: 0;
+
+        backdrop-filter: blur(16px);
+
+        .svg {
+            margin: 0;
+
+            display: block;
+        }
+    }
+
+    .nav-hide {
+        display: none;
+    }
+
+    .info-text {
+        text-align: left !important;
+    }
+
+    footer {
+        margin-bottom: 4rem !important;
+    }
+
+    #back-to-top {
+        bottom: 5rem !important;
+    }
 }
\ No newline at end of file
diff --git a/css/scss/_variables.scss b/css/scss/_variables.scss
index ee9dd41..0749c8f 100644
--- a/css/scss/_variables.scss
+++ b/css/scss/_variables.scss
@@ -13,32 +13,29 @@ $white: #E8E3E3;
 $page-accent: #8C977D;
 
 $shadow: 6px 6px 2px #15151588;
-$rad: 0;
+$rad: 0rem;
 
 $weight-bold: 621;
 $weight-normal: 400;
 
-$font-header: 'Lexend Deca', sans-serif;
-$font-body: 'Secular One', sans-serif;
+$font-header: 'Lexend Deca',
+sans-serif;
+$font-body: 'Secular One',
+sans-serif;
 
 // Fallback for items that do not yet support the new sass stylesheet system
 :root {
-    --bg: #151515bb;
-    --bg-1: #242621;
-    --bg-2: #1D1E1C;
-    --bg-3: #151515;
-  
-    --fg:#E8E3E3;
-    --fg-dark: #151515;
-  
-    --red: #B66467;
-    --orange: #FF7700;
-    --green: #8C977D;
-    --black: #151515;
-    --white: #E8E3E3;
-  
-    --shadow: 6px 6px 2px #15151588;
-    --rad: 0px;
-  
-    --square: 33.33%;
-  }
\ No newline at end of file
+  --bg: #151515bb;
+  --bg-1: #242621;
+  --bg-2: #1D1E1C;
+  --bg-3: #151515;
+
+  --fg: #E8E3E3;
+  --fg-dark: #151515;
+
+  --red: #B66467;
+  --orange: #FF7700;
+  --green: #8C977D;
+  --black: #151515;
+  --white: #E8E3E3;
+}
\ No newline at end of file
diff --git a/ui/nav.php b/ui/nav.php
index 66657d5..938d915 100644
--- a/ui/nav.php
+++ b/ui/nav.php
@@ -1,19 +1,19 @@
-<nav class="nav-root flex-left between">
+<nav class="nav-root flex-left">
   <div class="nav-name flex-left">
     <p>Lynx Gallery</p>
   </div>
   <div class="nav-links flex-left">
-    <a class='btn alert-default' href='<?php echo $root_dir; ?>index.php'><img class='svg' src='<?php echo $root_dir; ?>assets/icons/house.svg'><span class='nav-hide'>Home</span></a>
+    <a class='btn' href='<?php echo $root_dir; ?>index.php'><img class='svg' src='<?php echo $root_dir; ?>assets/icons/house.svg'><span class='nav-hide'>Home</span></a>
     <hr>
-    <a class='btn alert-default' href='<?php echo $root_dir; ?>search.php'><img class='svg' src='<?php echo $root_dir; ?>assets/icons/binoculars.svg'><span class='nav-hide'>Search</span></a>
+    <a class='btn' href='<?php echo $root_dir; ?>search.php'><img class='svg' src='<?php echo $root_dir; ?>assets/icons/binoculars.svg'><span class='nav-hide'>Search</span></a>
     <hr>
     <?php
     if (loggedin()) {
-      echo "<a class='btn alert-default' href='".$root_dir."upload.php'><img class='svg' src='".$root_dir."assets/icons/upload.svg'><span class='nav-hide'>Upload</span></a>";
+      echo "<a class='btn' href='".$root_dir."upload.php'><img class='svg' src='".$root_dir."assets/icons/upload.svg'><span class='nav-hide'>Upload</span></a>";
       echo "<hr>";
-      echo "<a class='btn alert-default' href='".$root_dir."/account/account.php'><img class='svg' src='".$root_dir."assets/icons/user-circle.svg'><span class='nav-hide'>".substr($_SESSION["username"], 0, 15)."</span></a>";
+      echo "<a class='btn' href='".$root_dir."/account/account.php'><img class='svg' src='".$root_dir."assets/icons/user-circle.svg'><span class='nav-hide'>".substr($_SESSION["username"], 0, 15)."</span></a>";
     } else {
-      echo "<a class='btn alert-default' href='".$root_dir."/account/login.php'><img class='svg' src='".$root_dir."assets/icons/sign-in.svg'><span class='nav-hide'>Login</span></a>";
+      echo "<a class='btn' href='".$root_dir."/account/login.php'><img class='svg' src='".$root_dir."assets/icons/sign-in.svg'><span class='nav-hide'>Login</span></a>";
     }
     ?>
   </div>
diff --git a/upload.php b/upload.php
index e4687a0..e8512e4 100644
--- a/upload.php
+++ b/upload.php
@@ -6,7 +6,7 @@
   <title>Lynx Gallery</title>
 
   <!-- Stylesheets -->
-  <link rel="stylesheet" href="css/master.css">
+  <link rel="stylesheet" href="css/main.css">
   <link rel="stylesheet" href="css/normalise.css">
 
   <!-- Google Fonts -->
@@ -87,13 +87,15 @@
   }
   ?>
 
-  <div class="upload-root default-window">
-    <h2 class="space-bottom">Upload image</h2>
+  <div class="upload-root">
+    <h2>Upload image</h2>
     <p>In this world you have 2 choices, to upload a really cute picture of an animal or fursuit, or something other than those 2 things.</p>
+    <br>
     <form id="uploadSubmit" class="flex-down between" method="POST" enctype="multipart/form-data">
-        <input id="image" class="btn alert-default space-bottom" type="file" placeholder="select image UwU">
-        <input id="alt" class="btn alert-default space-bottom-large" type="text" placeholder="Description/Alt for image">
-        <button id="submit" class="btn alert-high" type="submit"><img class="svg" src="assets/icons/upload.svg">Upload Image</button>
+        <input id="image" class="btn btn-neutral" type="file" placeholder="select image UwU">
+        <input id="alt" class="btn btn-neutral" type="text" placeholder="Description/Alt for image">
+        <br>
+        <button id="submit" class="btn btn-good" type="submit"><img class="svg" src="assets/icons/upload.svg">Upload Image</button>
     </form>
   </div>
 
