From bd7765b3768b3a4ce0a629744531986f21931eef Mon Sep 17 00:00:00 2001
From: Fluffy-Bean <michal-gdula@protonmail.com>
Date: Wed, 9 Nov 2022 18:37:02 +0000
Subject: [PATCH] Format SCSS with prettier

---
 app/sanity/check/_database.php |   33 +-
 app/sanity/sanity.php          |    8 +-
 css/main.css                   |  202 ++---
 css/main.scss                  |  475 +++++------
 css/scss/_body.scss            | 1357 ++++++++++++++++----------------
 css/scss/_footer.scss          |   63 +-
 css/scss/_mixin.scss           |   73 +-
 css/scss/_navigation.scss      |  186 ++---
 css/scss/_variables.scss       |   31 +-
 9 files changed, 1233 insertions(+), 1195 deletions(-)

diff --git a/app/sanity/check/_database.php b/app/sanity/check/_database.php
index 9ed4b89..33847ca 100644
--- a/app/sanity/check/_database.php
+++ b/app/sanity/check/_database.php
@@ -1,13 +1,20 @@
 
 <?php
-// Database check, this will check if the database table is setup correctly
-// Adding these check hopefully will make the gallery more stable as I dont
-// Trust my programming skills nor my ability to write good documentation
-
-// Im also so sorry for the code you're about to read
+/*
+ |-------------------------------------------------------------
+ | Database Sanity Check
+ |-------------------------------------------------------------
+ | this will check if the database table is setup correctly
+ | Adding these checks hopefully will make the gallery more
+ | stable as I dont trust my programming skills nor my ability
+ | to write good documentation.
+ |
+ | Im also so sorry for the code you're about to read
+ |-------------------------------------------------------------
+*/
 
 if (defined('ROOT') && $_SESSION['id'] == 1) {
-    //        Column name       Type            Null    Key     Default                 Extra
+    /*             Column name      Type            Null    Key     Default                 Extra                 */
     $table_templates = array(
         'images' => array(
             array('id',             'int(11)',      'NO',   'PRI',  '',                     'auto_increment'),
@@ -34,9 +41,15 @@ if (defined('ROOT') && $_SESSION['id'] == 1) {
             array('last_modified',  'timestamp',    'NO',   '',     'CURRENT_TIMESTAMP',    'on update CURRENT_TIMESTAMP'),
             array('created_at',     'timestamp',    'NO',   '',     'CURRENT_TIMESTAMP',    '')
         ),
+        'tokens' => array(
+            array('id',             'int(11)',      'NO',   'PRI',  '',                     'auto_increment'),
+            array('code',           'varchar(255)', 'NO',   '',     '',                     ''),
+            array('used',           'boolean',      'NO',   '',     'FALSE',                ''),
+            array('created_at',     'timestamp',    'NO',   '',     'CURRENT_TIMESTAMP',    '')
+        ),
         'logs' => array(
             array('id',             'int(11)',      'NO',   'PRI',  '',                     'auto_increment'),
-            array('ipaddress',      'varchar(16)', 'NO',   '',     '',                     ''),
+            array('ipaddress',      'varchar(16)',  'NO',   '',     '',                     ''),
             array('action',         'varchar(255)', 'NO',   '',     '',                     ''),
             array('created_at',     'timestamp',    'NO',   '',     'CURRENT_TIMESTAMP',    '')
         ),
@@ -47,12 +60,6 @@ if (defined('ROOT') && $_SESSION['id'] == 1) {
             array('time',           'timestamp',    'NO',   '',     'CURRENT_TIMESTAMP',    ''),
             array('length',         'int(255)',     'NO',   '',     '',                     ''),
             array('pernament',      'boolean',      'NO',   '',     'FALSE',                '')
-        ),
-        'tokens' => array(
-            array('id',             'int(11)',      'NO',   'PRI',  '',                     'auto_increment'),
-            array('code',           'varchar(255)', 'NO',   '',     '',                     ''),
-            array('used',           'boolean',      'NO',   '',     'FALSE',                ''),
-            array('created_at',     'timestamp',    'NO',   '',     'CURRENT_TIMESTAMP',    '')
         )
     );
 
diff --git a/app/sanity/sanity.php b/app/sanity/sanity.php
index f08e99c..2ba318d 100644
--- a/app/sanity/sanity.php
+++ b/app/sanity/sanity.php
@@ -9,10 +9,10 @@ if (isset($_POST['fix'])) {
     echo "<p><span style='color: var(--accent);'>[INFO]</span> Starting autofix</p>";
 
     if (empty($_SESSION['id'])) {
-        echo "<p><span style='color: var(--warning);'>[ERROR]</span> You are not logged in</p>";
+        echo "<p class='alert alert-bad'>You are not logged in</p>";
         exit();
     } elseif ($_SESSION['id'] != 1) {
-        echo "<p><span style='color: var(--warning);'>[ERRO]</span>  You cannot use Autofix as an Admin currently.</p>";
+        echo "<p class='alert alert-warning'>Autofix is currently not avaliable to You.</p>";
         exit();
     }
 
@@ -31,10 +31,10 @@ if (isset($_POST['fix'])) {
     echo "<p><span style='color: var(--accent);'>[INFO]</span> Autofix complete in $timer_diff ms</p>";
 } elseif (isset($_POST['check'])) {
     if (empty($_SESSION['id'])) {
-        echo "<p><span style='color: var(--warning);'>[ERROR]</span> You are not logged in</p>";
+        echo "<p class='alert alert-bad'>You are not logged in</p>";
         exit();
     } elseif ($_SESSION['id'] != 1) {
-        echo "<p><span style='color: var(--warning);'>[ERRO]</span>  You cannot use Autofix as an Admin currently.</p>";
+        echo "<p class='alert alert-warning'>Autofix is currently not avaliable to You.</p>";
         exit();
     }
 
diff --git a/css/main.css b/css/main.css
index 8fa32de..d4dec90 100644
--- a/css/main.css
+++ b/css/main.css
@@ -10,26 +10,26 @@
 :root {
   --bg: rgba(21, 21, 21, 0.7333333333);
   --bg-1: #242621;
-  --bg-2: #1D1E1C;
+  --bg-2: #1d1e1c;
   --bg-3: #151515;
-  --fg: #E8E3E3;
+  --fg: #e8e3e3;
   --fg-dark: #151515;
-  --red: #B66467;
-  --orange: #D8A657;
-  --yellow: #D9BC8C;
-  --green: #8C977D;
-  --blue: #8DA3B9;
-  --purple: #A988B0;
+  --red: #b66467;
+  --orange: #d8a657;
+  --yellow: #d9bc8c;
+  --green: #8c977d;
+  --blue: #8da3b9;
+  --purple: #a988b0;
   --black: #121212;
-  --white: #E8E3E3;
-  --accent: #8C977D;
-  --warning: #B66467;
-  --alert: #D8A657;
-  --success: #8C977D;
+  --white: #e8e3e3;
+  --accent: #8c977d;
+  --warning: #b66467;
+  --alert: #d8a657;
+  --success: #8c977d;
   --neutral: #121212;
   --shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
   --rad: 0.4rem;
-  --border: #8C977D 0.2rem solid;
+  --border: #8c977d 0.2rem solid;
 }
 
 /*
@@ -39,9 +39,9 @@
 */
 nav {
   background-color: #151515;
-  color: #E8E3E3;
+  color: #e8e3e3;
   border-radius: 0.4rem;
-  border: #8C977D 0.2rem solid;
+  border: #8c977d 0.2rem solid;
   box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
   display: flex;
   flex-direction: row;
@@ -129,7 +129,7 @@ nav .btn {
     left: 0;
     right: 0;
     border: none;
-    border-top: #8C977D 0.2rem solid;
+    border-top: #8c977d 0.2rem solid;
     border-radius: 0;
     -webkit-backdrop-filter: blur(16px);
             backdrop-filter: blur(16px);
@@ -175,17 +175,17 @@ nav .btn {
 
 .defaultDecoration {
   background-color: #151515;
-  color: #E8E3E3;
+  color: #e8e3e3;
   border-radius: 0.4rem;
-  border: #8C977D 0.2rem solid;
+  border: #8c977d 0.2rem solid;
   box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
 }
 
 .warningDecoration {
   background-color: #151515;
-  color: #E8E3E3;
+  color: #e8e3e3;
   border-radius: 0.4rem;
-  border: #B66467 0.2rem solid;
+  border: #b66467 0.2rem solid;
   box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
 }
 
@@ -305,7 +305,7 @@ nav .btn {
   background-color: rgba(21, 21, 21, 0.7333333333);
 }
 .nsfw-warning span {
-  color: #B66467;
+  color: #b66467;
   text-align: center;
 }
 .nsfw-warning span::after {
@@ -372,8 +372,8 @@ nav .btn {
   display: block;
 }
 .fullscreen-image button:hover {
-  outline: #E8E3E3 0.2rem solid;
-  color: #E8E3E3;
+  outline: #e8e3e3 0.2rem solid;
+  color: #e8e3e3;
   cursor: pointer;
 }
 
@@ -427,8 +427,8 @@ nav .btn {
   display: block;
 }
 .preview-button:hover {
-  outline: #E8E3E3 0.2rem solid;
-  color: #E8E3E3;
+  outline: #e8e3e3 0.2rem solid;
+  color: #e8e3e3;
   cursor: pointer;
 }
 
@@ -468,7 +468,7 @@ nav .btn {
   margin: 0 0.5rem 0.5rem 0;
   padding: 0.5rem;
   display: block;
-  background-color: #8C977D;
+  background-color: #8c977d;
   border-radius: 3px;
   font-family: "Secular One", sans-serif;
 }
@@ -498,7 +498,7 @@ nav .btn {
 .group-description h2 a {
   margin-left: 0.25rem;
   font-size: 16px;
-  color: #8C977D;
+  color: #8c977d;
   text-decoration: none;
 }
 .group-description > * {
@@ -508,10 +508,10 @@ nav .btn {
   text-decoration: none;
 }
 .group-description a:hover {
-  color: #8C977D;
+  color: #8c977d;
 }
 .group-description .btn:hover {
-  color: #E8E3E3;
+  color: #e8e3e3;
 }
 
 .group-cover {
@@ -543,7 +543,7 @@ nav .btn {
 }
 
 .selectedImage {
-  outline: #8C977D solid 0.3rem;
+  outline: #8c977d solid 0.3rem;
   transform: scale(0.8) !important;
 }
 
@@ -599,7 +599,7 @@ nav .btn {
   transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
 }
 .group-make:hover {
-  outline: #E8E3E3 0.2rem solid;
+  outline: #e8e3e3 0.2rem solid;
 }
 .group-make:after {
   content: "";
@@ -627,7 +627,7 @@ nav .btn {
   font-family: "Secular One", sans-serif;
 }
 .group-make button:hover {
-  color: #E8E3E3;
+  color: #e8e3e3;
   cursor: pointer;
 }
 .group-make button span {
@@ -667,7 +667,7 @@ nav .btn {
   top: -3rem;
   transform: translateX(-50%);
   border-radius: 0.4rem;
-  border: #8C977D 0.2rem solid;
+  border: #8c977d 0.2rem solid;
   background-color: #151515;
 }
 .profile-root h2, .profile-root > p {
@@ -750,8 +750,8 @@ nav .btn {
 }
 
 .active-tab {
-  background-color: #8C977D !important;
-  background-image: linear-gradient(to top, #7f8b6f, #8C977D) !important;
+  background-color: #8c977d !important;
+  background-image: linear-gradient(to top, #7f8b6f, #8c977d) !important;
 }
 
 .logs {
@@ -850,7 +850,7 @@ nav .btn {
 }
 
 .perm {
-  border-left: #8C977D 0.2rem solid;
+  border-left: #8c977d 0.2rem solid;
 }
 
 .ban:first-of-type {
@@ -910,7 +910,7 @@ nav .btn {
 }
 
 .is-admin {
-  border-left: #8C977D 0.2rem solid;
+  border-left: #8c977d 0.2rem solid;
 }
 
 .user:first-of-type {
@@ -927,14 +927,14 @@ nav .btn {
 }
 .btn-code::before {
   content: "Hover to reveal";
-  color: #E8E3E3;
+  color: #e8e3e3;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
 }
 .btn-code:hover {
-  color: #E8E3E3;
+  color: #e8e3e3;
 }
 .btn-code:hover::before {
   content: "";
@@ -967,9 +967,9 @@ nav .btn {
 }
 
 /*
- |-------------------------------------------------------------
- | FOOTER
- |-------------------------------------------------------------
+|-------------------------------------------------------------
+| FOOTER
+|-------------------------------------------------------------
 */
 footer {
   margin: 0 auto;
@@ -996,7 +996,7 @@ footer a {
   font-family: "Secular One", sans-serif;
 }
 footer a:hover {
-  color: #D8A657;
+  color: #d8a657;
 }
 
 /*
@@ -1031,7 +1031,7 @@ body {
   position: relative;
 }
 body * {
-  color: #E8E3E3;
+  color: #e8e3e3;
 }
 
 /*
@@ -1051,45 +1051,45 @@ body * {
   text-decoration: none;
   border: none;
   border-radius: 3px;
-  outline: #E8E3E3 0 solid;
+  outline: #e8e3e3 0 solid;
   transition: outline 0.1s;
   /*
-  &::after {
-      content: "";
-      position: absolute;
-      box-sizing: border-box;
-      width: calc(100% + calc($border-thickness * 4));
-      height: calc(100% + calc($border-thickness * 4));
-      top: calc($border-thickness * -2);
-      left: calc($border-thickness * -2);
-      z-index: +1;
-      @if calc($rad - 0.5rem) > 0 {
-          border-radius: calc($rad - 0.5rem);
-      } @else {
-          border-radius: calc(3px * 2);
-      }
-      border: $fg $border-thickness solid;
-      opacity: 0;
+    &::after {
+        content: "";
+        position: absolute;
+        box-sizing: border-box;
+        width: calc(100% + calc($border-thickness * 4));
+        height: calc(100% + calc($border-thickness * 4));
+        top: calc($border-thickness * -2);
+        left: calc($border-thickness * -2);
+        z-index: +1;
+        @if calc($rad - 0.5rem) > 0 {
+            border-radius: calc($rad - 0.5rem);
+        } @else {
+            border-radius: calc(3px * 2);
+        }
+        border: $fg $border-thickness solid;
+        opacity: 0;
 
-      transition: all 0.1s ease-in-out;
+        transition: all 0.1s ease-in-out;
 
-      pointer-events: none;
-  }
-  */
+        pointer-events: none;
+    }
+    */
 }
 .btn:hover {
-  outline: #E8E3E3 0.2rem solid;
-  color: #E8E3E3;
+  outline: #e8e3e3 0.2rem solid;
+  color: #e8e3e3;
   cursor: pointer;
   /*
-  &::after {
-      opacity: 1;
-      width: calc(100% + calc($border-thickness * 2));
-      height: calc(100% + calc($border-thickness * 2));
-      top: calc($border-thickness * -1);
-      left: calc($border-thickness * -1);
-  }
-  */
+      &::after {
+          opacity: 1;
+          width: calc(100% + calc($border-thickness * 2));
+          height: calc(100% + calc($border-thickness * 2));
+          top: calc($border-thickness * -1);
+          left: calc($border-thickness * -1);
+      }
+      */
 }
 .btn:where(input[type=file])::-webkit-file-upload-button {
   margin: -0.5rem 0.5rem -0.5rem -0.5rem;
@@ -1098,7 +1098,7 @@ body * {
   font-size: 16px;
   font-family: "Secular One", sans-serif;
   text-decoration: none;
-  background-color: #E8E3E3;
+  background-color: #e8e3e3;
   border: none;
   border-radius: 3px;
 }
@@ -1109,7 +1109,7 @@ body * {
   font-size: 16px;
   font-family: "Secular One", sans-serif;
   text-decoration: none;
-  background-color: #E8E3E3;
+  background-color: #e8e3e3;
   border: none;
   border-radius: 3px;
 }
@@ -1128,18 +1128,18 @@ a.btn {
 }
 
 .btn-bad {
-  background-color: #B66467;
-  background-image: linear-gradient(to top, #ae5356, #B66467);
+  background-color: #b66467;
+  background-image: linear-gradient(to top, #ae5356, #b66467);
 }
 
 .btn-warning {
-  background-color: #D8A657;
-  background-image: linear-gradient(to top, #d39b42, #D8A657);
+  background-color: #d8a657;
+  background-image: linear-gradient(to top, #d39b42, #d8a657);
 }
 
 .btn-good {
-  background-color: #8C977D;
-  background-image: linear-gradient(to top, #7f8b6f, #8C977D);
+  background-color: #8c977d;
+  background-image: linear-gradient(to top, #7f8b6f, #8c977d);
 }
 
 .btn-neutral {
@@ -1161,24 +1161,24 @@ a.btn {
   font-weight: 500;
   font-family: "Secular One", sans-serif;
   text-decoration: none;
-  border-left: 0.2rem solid #E8E3E3;
+  border-left: 0.2rem solid #e8e3e3;
   background-color: #151515;
   background-repeat: no-repeat;
   border-radius: 3px;
 }
 
 .alert-bad {
-  border-color: #B66467;
+  border-color: #b66467;
   background-image: linear-gradient(120deg, rgba(182, 100, 103, 0.3), rgba(21, 21, 21, 0));
 }
 
 .alert-warning {
-  border-color: #D8A657;
+  border-color: #d8a657;
   background-image: linear-gradient(120deg, rgba(216, 166, 87, 0.3), rgba(21, 21, 21, 0));
 }
 
 .alert-good {
-  border-color: #8C977D;
+  border-color: #8c977d;
   background-image: linear-gradient(120deg, rgba(140, 151, 125, 0.3), rgba(21, 21, 21, 0));
 }
 
@@ -1200,7 +1200,7 @@ a.btn {
   padding: 0.2em 0.4em;
   border: #121212 0.2rem solid;
   border-radius: 3px;
-  color: #E8E3E3;
+  color: #e8e3e3;
   font-size: 0.8em;
   font-weight: bold;
   font-family: "Secular One", sans-serif;
@@ -1216,24 +1216,24 @@ a.btn {
 }
 .badge.badge-primary {
   background: rgba(140, 151, 125, 0.3);
-  border: #8C977D 0.2rem solid;
+  border: #8c977d 0.2rem solid;
 }
 .badge.badge-primary.link:hover {
-  color: #8C977D;
+  color: #8c977d;
 }
 .badge.badge-critical {
   background: rgba(182, 100, 103, 0.3);
-  border: #B66467 0.2rem solid;
+  border: #b66467 0.2rem solid;
 }
 .badge.badge-critical.link:hover {
-  color: #B66467;
+  color: #b66467;
 }
 .badge.badge-warning {
   background: rgba(216, 166, 87, 0.3);
-  border: #D8A657 0.2rem solid;
+  border: #d8a657 0.2rem solid;
 }
 .badge.badge-warning.link:hover {
-  color: #D8A657;
+  color: #d8a657;
 }
 
 /*
@@ -1309,7 +1309,7 @@ a.link {
   text-decoration: underline;
 }
 a.link:hover {
-  color: #8C977D;
+  color: #8c977d;
 }
 
 /*
@@ -1334,7 +1334,7 @@ a.link:hover {
   transition: right 0.15s cubic-bezier(0.19, 1, 0.22, 1);
 }
 #back-to-top:hover {
-  outline: 0.2rem solid #8C977D;
+  outline: 0.2rem solid #8c977d;
 }
 #back-to-top * {
   margin: 0;
@@ -1354,7 +1354,7 @@ a.link:hover {
 .hr {
   margin: 0.5rem 0;
   border: none;
-  border-top: 0.2rem solid #E8E3E3;
+  border-top: 0.2rem solid #e8e3e3;
 }
 
 .hr-full {
@@ -1363,13 +1363,13 @@ a.link:hover {
 }
 
 .hr-bad {
-  border-color: #B66467;
+  border-color: #b66467;
 }
 
 .hr-warning {
-  border-color: #D8A657;
+  border-color: #d8a657;
 }
 
 .hr-good {
-  border-color: #8C977D;
+  border-color: #8c977d;
 }/*# sourceMappingURL=main.css.map */
\ No newline at end of file
diff --git a/css/main.scss b/css/main.scss
index 97392e1..2c58261 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -20,42 +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/backgrounds/bg.svg");
+  background-color: $bg;
+  background-image: url("../assets/backgrounds/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: 1100px;
+  max-width: 1100px;
 
-    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;
+  }
 }
 
 /*
@@ -64,32 +64,33 @@ body {
  |-------------------------------------------------------------
 */
 .btn {
-    padding: 0.5rem;
+  padding: 0.5rem;
 
-    width: 100%;
+  width: 100%;
 
-    position: relative;
-    display: block;
-    box-sizing: border-box;
+  position: relative;
+  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-decoration: none;
 
-    border: none;
-    @if calc($rad - 0.5rem) > 0 {
-        border-radius: calc($rad - 0.5rem);
-    } @else {
-        border-radius: 3px;
-    }
+  border: none;
 
-    outline: $fg 0 solid;
+  @if calc($rad - 0.5rem) >0 {
+    border-radius: calc($rad - 0.5rem);
+  } @else {
+    border-radius: 3px;
+  }
 
-    transition: outline 0.1s;
+  outline: $fg 0 solid;
 
-    /*
+  transition: outline 0.1s;
+
+  /*
     &::after {
         content: "";
         position: absolute;
@@ -113,13 +114,13 @@ body {
     }
     */
 
-    &:hover {
-        outline: $fg $border-thickness solid;
-        color: $fg;
+  &:hover {
+    outline: $fg $border-thickness solid;
+    color: $fg;
 
-        cursor: pointer;
+    cursor: pointer;
 
-        /*
+    /*
         &::after {
             opacity: 1;
             width: calc(100% + calc($border-thickness * 2));
@@ -128,66 +129,70 @@ body {
             left: calc($border-thickness * -1);
         }
         */
+  }
+
+  &: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;
+    font-family: $font-body;
+
+    text-decoration: none;
+
+    background-color: $white;
+
+    border: none;
+
+    @if calc($rad - 0.5rem) >0 {
+      border-radius: calc($rad - 0.5rem);
+    } @else {
+      border-radius: 3px;
     }
+  }
 
-    &:where(input[type="file"])::file-selector-button {
-        margin: -0.5rem 0.5rem -0.5rem -0.5rem;
-        padding: 0.5rem;
+  &:disabled {
+    cursor: not-allowed;
+    outline: none;
 
-        display: inline-block;
+    z-index: 1;
 
-        font-size: 16px;
-        font-family: $font-body;
+    filter: brightness(0.5) grayscale(0.3);
 
-        text-decoration: none;
-
-        background-color: $white;
-
-        border: none;
-        @if calc($rad - 0.5rem) > 0 {
-            border-radius: calc($rad - 0.5rem);
-        } @else {
-            border-radius: 3px;
-        }
-    }
-
-    &:disabled {
-        cursor: not-allowed;
-        outline: none;
-
-        z-index: 1;
-
-        filter: brightness(0.5) grayscale(0.3);
-
-        img {
-            display: none;
-        }
+    img {
+      display: none;
     }
+  }
 }
 
 a.btn {
-    text-align: center;
+  text-align: center;
 }
 
-
 .btn-bad {
-    background-color: $warning;
-    background-image: linear-gradient(to top, darken($warning, 5%), $warning);
+  background-color: $warning;
+  background-image: linear-gradient(to top, darken($warning, 5%), $warning);
 }
+
 .btn-warning {
-    background-color: $alert;
-    background-image: linear-gradient(to top, darken($alert, 5%), $alert);
-    
+  background-color: $alert;
+  background-image: linear-gradient(to top, darken($alert, 5%), $alert);
 }
+
 .btn-good {
-    background-color: $page-accent;
-    background-image: linear-gradient(to top, darken($page-accent, 5%), $page-accent);
-    
+  background-color: $page-accent;
+  background-image: linear-gradient(
+    to top,
+    darken($page-accent, 5%),
+    $page-accent
+  );
 }
+
 .btn-neutral {
-    background-color: $neutral;
-    background-image: linear-gradient(to top, darken($neutral, 0.5%), $neutral);
-    
+  background-color: $neutral;
+  background-image: linear-gradient(to top, darken($neutral, 0.5%), $neutral);
 }
 
 /*
@@ -196,51 +201,57 @@ a.btn {
  |-------------------------------------------------------------
 */
 .alert {
-    padding: 0.75rem;
+  padding: 0.75rem;
 
-    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-decoration: none;
 
-    border-left: $border-thickness solid $fg;
-    background-color: $bg;
-    background-repeat: no-repeat;
+  border-left: $border-thickness solid $fg;
+  background-color: $bg;
+  background-repeat: no-repeat;
 
-    @if calc($rad - 0.5rem) > 0 {
-        border-radius: calc($rad - 0.3rem);
-    } @else {
-        border-radius: 3px;
-    }
+  @if calc($rad - 0.5rem) >0 {
+    border-radius: calc($rad - 0.3rem);
+  } @else {
+    border-radius: 3px;
+  }
 }
 
 .alert-bad {
-    border-color: $warning;
-    background-image: linear-gradient(120deg, rgba($warning, 0.3), rgba($bg, 0));
+  border-color: $warning;
+  background-image: linear-gradient(120deg, rgba($warning, 0.3), rgba($bg, 0));
 }
+
 .alert-warning {
-    border-color: $alert;
-    background-image: linear-gradient(120deg, rgba($alert, 0.3), rgba($bg, 0));
+  border-color: $alert;
+  background-image: linear-gradient(120deg, rgba($alert, 0.3), rgba($bg, 0));
 }
+
 .alert-good {
-    border-color: $page-accent;
-    background-image: linear-gradient(120deg, rgba($page-accent, 0.3), rgba($bg, 0));
+  border-color: $page-accent;
+  background-image: linear-gradient(
+    120deg,
+    rgba($page-accent, 0.3),
+    rgba($bg, 0)
+  );
 }
 
 .alert-box {
-    > * {
-        margin: 0 0 0.5rem 0;
-    }
+  > * {
+    margin: 0 0 0.5rem 0;
+  }
 
-    > *:last-child {
-        margin: 0;
-    }
+  > *:last-child {
+    margin: 0;
+  }
 }
 
 /*
@@ -249,51 +260,53 @@ a.btn {
  |-------------------------------------------------------------
 */
 @mixin badge($color, $fg: $color) {
-    background: rgba($color, 0.3);
-    border: $color $border-thickness solid;
+  background: rgba($color, 0.3);
+  border: $color $border-thickness solid;
 
-    &.link:hover {
-        color: $color;
-    }
+  &.link:hover {
+    color: $color;
+  }
 }
 
 .badge {
+  display: inline-block;
+  box-sizing: border-box;
+  //margin: 0 0.25rem;
+  padding: 0.2em 0.4em;
+  border: $black $border-thickness solid;
+
+  @if calc($rad - 0.5rem) >0 {
+    border-radius: calc($rad - 0.3rem);
+  } @else {
+    border-radius: 3px;
+  }
+
+  color: $fg;
+  font-size: 0.8em;
+  font-weight: bold;
+  font-family: $font-body;
+  line-height: 1;
+  vertical-align: baseline;
+  white-space: nowrap;
+  text-align: center;
+
+  &.link {
+    cursor: pointer;
+    text-decoration: none;
     display: inline-block;
-    box-sizing: border-box;
-    //margin: 0 0.25rem;
-    padding: 0.2em 0.4em;
-    border: $black $border-thickness solid;
-    @if calc($rad - 0.5rem) > 0 {
-        border-radius: calc($rad - 0.3rem);
-    } @else {
-        border-radius: 3px;
-    }
-    color: $fg;
-    font-size: 0.8em;
-    font-weight: bold;
-    font-family: $font-body;
-    line-height: 1;
-    vertical-align: baseline;
-    white-space: nowrap;
-    text-align: center;
+  }
 
-    &.link {
-        cursor: pointer;
-        text-decoration: none;
-        display: inline-block;
-    }
+  &.badge-primary {
+    @include badge($page-accent);
+  }
 
-    &.badge-primary {
-        @include badge($page-accent);
-    }
+  &.badge-critical {
+    @include badge($red);
+  }
 
-    &.badge-critical {
-        @include badge($red);
-    }
-
-    &.badge-warning {
-        @include badge($orange);
-    }
+  &.badge-warning {
+    @include badge($orange);
+  }
 }
 
 /*
@@ -302,50 +315,52 @@ a.btn {
  |-------------------------------------------------------------
 */
 form {
-    width: 100%;
-    box-sizing: border-box;
+  width: 100%;
+  box-sizing: border-box;
 
-    & > * {
-        margin-bottom: 0.5rem;
-    }
+  & > * {
+    margin-bottom: 0.5rem;
+  }
 }
 
 textarea {
-    resize: none;
+  resize: none;
 }
+
 /*
  |-------------------------------------------------------------
  | SVG
  |-------------------------------------------------------------
 */
 .svg {
-    margin: 0 0.2rem 0.1rem 0;
+  margin: 0 0.2rem 0.1rem 0;
 
-    width: 1.15rem;
-    height: 1.1rem;
+  width: 1.15rem;
+  height: 1.1rem;
 
-    vertical-align: middle;
+  vertical-align: middle;
 
-    display: inline;
+  display: inline;
 
-    @if calc($rad - 0.5rem) > 0 {
-        border-radius: calc($rad - 0.5rem);
-    } @else {
-        border-radius: 3px;
-    }
+  @if calc($rad - 0.5rem) >0 {
+    border-radius: calc($rad - 0.5rem);
+  } @else {
+    border-radius: 3px;
+  }
 }
 
 .loading {
-    animation: spin 1.5s ease-in-out infinite;
+  animation: spin 1.5s ease-in-out infinite;
 }
 
 @keyframes spin {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 /*
@@ -354,9 +369,9 @@ textarea {
  |-------------------------------------------------------------
 */
 br {
-    margin: 0;
+  margin: 0;
 
-    line-height: 0.25rem;
+  line-height: 0.25rem;
 }
 
 /*
@@ -365,12 +380,12 @@ br {
  |-------------------------------------------------------------
 */
 a.link {
-    display: inline;
-    text-decoration: underline;
+  display: inline;
+  text-decoration: underline;
 
-    &:hover {
-        color: $page-accent;
-    }
+  &:hover {
+    color: $page-accent;
+  }
 }
 
 /*
@@ -379,69 +394,71 @@ a.link {
  |-------------------------------------------------------------
 */
 #back-to-top {
-    margin: 0;
-    padding: 0.5rem;
+  margin: 0;
+  padding: 0.5rem;
 
-    position: fixed;
-    z-index: 99;
-    right: -2.5rem;
-    bottom: 1rem;
+  position: fixed;
+  z-index: 99;
+  right: -2.5rem;
+  bottom: 1rem;
+
+  object-position: center;
+
+  background-color: $bg-alt;
+  backdrop-filter: blur(8px);
+
+  @if calc($rad - 0.5rem) >0 {
+    border-radius: calc($rad - 0.5rem);
+  } @else {
+    border-radius: 3px;
+  }
+
+  box-shadow: $shadow;
+
+  transition: right 0.15s cubic-bezier(0.19, 1, 0.22, 1);
+
+  &:hover {
+    outline: 0.2rem solid $green;
+  }
+
+  * {
+    margin: 0;
+    padding: 0;
+    width: 1.5rem;
+    height: 1.5rem;
+
+    display: block;
 
     object-position: center;
-
-    background-color: $bg-alt;
-    backdrop-filter: blur(8px);
-
-    @if calc($rad - 0.5rem) > 0 {
-        border-radius: calc($rad - 0.5rem);
-    } @else {
-        border-radius: 3px;
-    }
-    
-    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;
-    }
+  }
 }
 
-@media(prefers-reduced-motion){
-    * {
-        transition: none !important;
-    }
+@media (prefers-reduced-motion) {
+  * {
+    transition: none !important;
+  }
 }
 
 .hr {
-    margin: 0.5rem 0;
+  margin: 0.5rem 0;
 
-    border: none;
-    border-top: $border-thickness solid $fg;
+  border: none;
+  border-top: $border-thickness solid $fg;
 }
 
 .hr-full {
-    margin-left: -0.5rem;
-    margin-right: -0.5rem;
+  margin-left: -0.5rem;
+  margin-right: -0.5rem;
 }
 
 .hr-bad {
-    border-color: $warning;
+  border-color: $warning;
 }
+
 .hr-warning {
-    border-color: $alert;
+  border-color: $alert;
 }
+
 .hr-good {
-    border-color: $page-accent;
-}
\ No newline at end of file
+  border-color: $page-accent;
+}
diff --git a/css/scss/_body.scss b/css/scss/_body.scss
index 44fbe1b..49b62d4 100644
--- a/css/scss/_body.scss
+++ b/css/scss/_body.scss
@@ -4,18 +4,18 @@
  |-------------------------------------------------------------
 */
 .defaultSpacing {
-    @include defaultSpacing();
+  @include defaultSpacing();
 }
 
 .defaultDecoration {
-    @include defaultDecoration($page-accent);
+  @include defaultDecoration($page-accent);
 }
 .warningDecoration {
-    @include defaultDecoration($red);
+  @include defaultDecoration($red);
 }
 
 .defaultFonts {
-    @include defaultFont();
+  @include defaultFont();
 }
 
 /*
@@ -24,150 +24,150 @@
  |-------------------------------------------------------------
 */
 .info-text {
-    margin: 1rem 0 1rem 0.5rem;
-    padding: 0;
+  margin: 1rem 0 1rem 0.5rem;
+  padding: 0;
 
-    text-align: center;
+  text-align: center;
 
-    h1 {
-        margin-top: 0;
-        margin-bottom: 1rem;
-    }
+  h1 {
+    margin-top: 0;
+    margin-bottom: 1rem;
+  }
 
-    p {
-        margin-top: 0;
-        margin-bottom: 1rem;
-    }
+  p {
+    margin-top: 0;
+    margin-bottom: 1rem;
+  }
 }
 
 .gallery-root {
-    margin-bottom: 1rem;
-    padding: 0.5rem;
-    gap: 0.5rem;
+  margin-bottom: 1rem;
+  padding: 0.5rem;
+  gap: 0.5rem;
 
-    display: grid;
-    grid-template-columns: auto auto auto auto auto;
+  display: grid;
+  grid-template-columns: auto auto auto auto auto;
 }
 
 .gallery-item {
-    margin: 0;
-    padding: 0;
+  margin: 0;
+  padding: 0;
 
-    height: auto;
+  height: auto;
 
-    background-color: $bg;
-    @if calc($rad - 0.5rem) > 0 {
-        border-radius: calc($rad - 0.5rem);
-    } @else {
-        border-radius: 3px;
-    }
+  background-color: $bg;
+  @if calc($rad - 0.5rem) > 0 {
+    border-radius: calc($rad - 0.5rem);
+  } @else {
+    border-radius: 3px;
+  }
 
-    position: relative;
-    overflow: hidden;
+  position: relative;
+  overflow: hidden;
 
-    transition: transform 0.4s cubic-bezier(.25,1.23,0,1.22);
+  transition: transform 0.4s cubic-bezier(0.25, 1.23, 0, 1.22);
 
-    &:hover {
-        transform: scale(1.15) rotate(5deg);
-        box-shadow: $shadow;
+  &:hover {
+    transform: scale(1.15) rotate(5deg);
+    box-shadow: $shadow;
 
-        z-index: 9;
-    }
+    z-index: 9;
+  }
 
-    &:active {
-        transform: scale(0.9) !important;
-    }
+  &:active {
+    transform: scale(0.9) !important;
+  }
 
-    &:after {
-        content: "";
-        display: block;
-        padding-bottom: 100%;
-    }
+  &:after {
+    content: "";
+    display: block;
+    padding-bottom: 100%;
+  }
 }
 
 @media (max-width: 800px) {
-    .gallery-root {
-        grid-template-columns: auto auto auto auto;
-    }
+  .gallery-root {
+    grid-template-columns: auto auto auto auto;
+  }
 }
 @media (max-width: 550px) {
-    .gallery-root {
-        grid-template-columns: auto auto auto;
-    }
+  .gallery-root {
+    grid-template-columns: auto auto auto;
+  }
 }
 
 .gallery-image {
-    margin: 0;
-    padding: 0;
+  margin: 0;
+  padding: 0;
 
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  height: 100%;
 
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
 
-    position: absolute;
+  position: absolute;
 
-    object-fit: cover;
-    object-position: center;
+  object-fit: cover;
+  object-position: center;
 
-    @if calc($rad - 0.5rem) > 0 {
-        border-radius: calc($rad - 0.5rem);
-    } @else {
-        border-radius: 3px;
-    }
+  @if calc($rad - 0.5rem) > 0 {
+    border-radius: calc($rad - 0.5rem);
+  } @else {
+    border-radius: 3px;
+  }
 }
 
 .nsfw-blur {
-    filter: blur(15px);
+  filter: blur(15px);
 }
 
 .nsfw-warning {
-    @include flexDown(center);
-    align-items: center;
+  @include flexDown(center);
+  align-items: center;
 
-    width: 100%;
-    height: 100%;
+  width: 100%;
+  height: 100%;
 
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
 
-    position: absolute;
-    z-index: 5;
+  position: absolute;
+  z-index: 5;
 
-    text-decoration: none;
-    font-family: $font-body;
+  text-decoration: none;
+  font-family: $font-body;
 
-    background-color: $bg-alt;
+  background-color: $bg-alt;
 
-    span {
-        color: $red;
+  span {
+    color: $red;
 
-        text-align: center;
+    text-align: center;
 
-        &::after {
-            content: ' Content';
-        }
+    &::after {
+      content: " Content";
     }
+  }
 
-    img {
-        margin: 0.25rem;
+  img {
+    margin: 0.25rem;
 
-        width: 2.5rem;
-        height: 2.5rem;
-    }
+    width: 2.5rem;
+    height: 2.5rem;
+  }
 }
 
 @media (max-width: 500px) {
-    .nsfw-warning {
-        span::after {
-            content: none;
-        }
+  .nsfw-warning {
+    span::after {
+      content: none;
     }
+  }
 }
 
 /*
@@ -176,214 +176,218 @@
  |-------------------------------------------------------------
 */
 .fullscreen-image {
-    width: 100vw; height: 100vh;
+  width: 100vw;
+  height: 100vh;
 
-    position: fixed;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%) scale(0.9);
+
+  background-color: $bg-alt;
+  backdrop-filter: blur(20px);
+
+  z-index: 999;
+
+  transition: opacity 0.3s cubic-bezier(0.075, 0.82, 0.165, 1),
+    transform 0.5s cubic-bezier(0.25, 1.23, 0, 1.22);
+
+  display: none; // Automatically hidden, revealed on fullscreen
+  opacity: 0; // expose
+
+  img {
+    max-width: 95%;
+    max-height: 95%;
+
+    position: absolute;
     top: 50%;
     left: 50%;
-    transform: translateX(-50%) translateY(-50%) scale(0.9);
-
-    background-color: $bg-alt;
-    backdrop-filter: blur(20px);
-
-    z-index: 999;
-
-    transition: opacity 0.3s cubic-bezier(0.075, 0.82, 0.165, 1), transform 0.5s cubic-bezier(.25,1.23,0,1.22);;
-
-    display: none;  // Automatically hidden, revealed on fullscreen
-    opacity: 0;     // expose
-
-    img {
-        max-width: 95%; max-height: 95%;
-
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translateX(-50%) translateY(-50%);
-
-        border-radius: $rad;
-
-        z-index: +1;
-    }
-
-    button {
-        padding: 0.25rem;
-
-        width: 2rem; height: 2rem;
-    
-        position: absolute;
-        top: 1.25rem;
-        right: 1.25rem;
-    
-        display: block;
-        box-sizing: border-box;
-    
-        border: none;
-        @if calc($rad - 0.5rem) > 0 {
-            border-radius: calc($rad - 0.5rem);
-        } @else {
-            border-radius: 3px;
-        }
-    
-        transition: outline 0.1s cubic-bezier(.19, 1, .22, 1);
-    
-        background-color: $black;
-
-        z-index: +2;
-    
-        img {
-            width: 1.5rem;
-    
-            display: block;
-        }
-    
-        &:hover {
-            outline: $white 0.2rem solid;
-            color: $fg;
-
-            cursor: pointer;
-        }
-    }
-}
-
-.image-container {
-    margin: 1rem 0 2rem 0;
-    padding: 0.5rem;
-
-    width: calc(100% - 1rem);
-    max-height: 50vh;
-    height: auto;
-    min-height: 30vh;
-
-    display: flex;
-
-    background-color: $bg-alt;
-    backdrop-filter: blur(20px);
+    transform: translateX(-50%) translateY(-50%);
 
     border-radius: $rad;
 
-    transition: max-height 0.15s cubic-bezier(.19, 1, .22, 1);
-}
+    z-index: +1;
+  }
 
-@media (max-width: 600px) {
-    .image-container {
-        max-height: 42vh;
-    }
-}
-
-.image {
-    margin: auto;
-
-    max-width: 100%;
-    width: auto;
-    max-height: inherit;
-    height: auto;
-
-    @if calc($rad - 0.5rem) > 0 {
-        border-radius: calc($rad - 0.5rem);
-    } @else {
-        border-radius: 3px;
-    }
-
-    transition: opacity 0.5s;
-}
-
-.preview-button {
+  button {
     padding: 0.25rem;
 
-    width: 2rem; height: 2rem;
+    width: 2rem;
+    height: 2rem;
 
     position: absolute;
-    bottom: 0.5rem;
-    right: 0.5rem;
+    top: 1.25rem;
+    right: 1.25rem;
 
     display: block;
     box-sizing: border-box;
 
     border: none;
     @if calc($rad - 0.5rem) > 0 {
-        border-radius: calc($rad - 0.5rem);
+      border-radius: calc($rad - 0.5rem);
     } @else {
-        border-radius: 3px;
+      border-radius: 3px;
     }
 
-    transition: outline 0.1s cubic-bezier(.19, 1, .22, 1);
+    transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
 
-    background-color: $bg-alt;
+    background-color: $black;
 
     z-index: +2;
 
     img {
-        width: 1.5rem;
+      width: 1.5rem;
 
-        display: block;
+      display: block;
     }
 
     &:hover {
-        outline: $white 0.2rem solid;
-        color: $fg;
+      outline: $white 0.2rem solid;
+      color: $fg;
 
-        cursor: pointer;
+      cursor: pointer;
     }
+  }
 }
 
+.image-container {
+  margin: 1rem 0 2rem 0;
+  padding: 0.5rem;
+
+  width: calc(100% - 1rem);
+  max-height: 50vh;
+  height: auto;
+  min-height: 30vh;
+
+  display: flex;
+
+  background-color: $bg-alt;
+  backdrop-filter: blur(20px);
+
+  border-radius: $rad;
+
+  transition: max-height 0.15s cubic-bezier(0.19, 1, 0.22, 1);
+}
+
+@media (max-width: 600px) {
+  .image-container {
+    max-height: 42vh;
+  }
+}
+
+.image {
+  margin: auto;
+
+  max-width: 100%;
+  width: auto;
+  max-height: inherit;
+  height: auto;
+
+  @if calc($rad - 0.5rem) > 0 {
+    border-radius: calc($rad - 0.5rem);
+  } @else {
+    border-radius: 3px;
+  }
+
+  transition: opacity 0.5s;
+}
+
+.preview-button {
+  padding: 0.25rem;
+
+  width: 2rem;
+  height: 2rem;
+
+  position: absolute;
+  bottom: 0.5rem;
+  right: 0.5rem;
+
+  display: block;
+  box-sizing: border-box;
+
+  border: none;
+  @if calc($rad - 0.5rem) > 0 {
+    border-radius: calc($rad - 0.5rem);
+  } @else {
+    border-radius: 3px;
+  }
+
+  transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
+
+  background-color: $bg-alt;
+
+  z-index: +2;
+
+  img {
+    width: 1.5rem;
+
+    display: block;
+  }
+
+  &:hover {
+    outline: $white 0.2rem solid;
+    color: $fg;
+
+    cursor: pointer;
+  }
+}
 
 // DETAILS
 .image-detail {
-    &>div {
-        width: 100%;
-        display: flex;
-        flex-direction: row;
+  & > div {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
 
-        &>div {
-            width: 50%;
+    & > div {
+      width: 50%;
 
-            * {
-                margin-top: 0;
-                margin-bottom: 0.5rem;
+      * {
+        margin-top: 0;
+        margin-bottom: 0.5rem;
 
-                text-overflow: ellipsis;
-                white-space: nowrap;
-                overflow: hidden;
-            }
-        }
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
     }
+  }
 }
 @media (max-width: 669px) {
-    .image-detail {
-        &>div {
-            flex-direction: column;
-            &>div {
-                width: auto;
-            }
-        }
+  .image-detail {
+    & > div {
+      flex-direction: column;
+      & > div {
+        width: auto;
+      }
     }
+  }
 }
 
 .tags {
-    @include flexLeft(auto);
-    margin-bottom: 0;
+  @include flexLeft(auto);
+  margin-bottom: 0;
 }
 
 .tag {
-    margin: 0 0.5rem 0.5rem 0;
-    padding: 0.5rem;
+  margin: 0 0.5rem 0.5rem 0;
+  padding: 0.5rem;
 
-    display: block;
+  display: block;
 
-    background-color: $page-accent;
+  background-color: $page-accent;
 
-    @if calc($rad - 0.5rem) > 0 {
-        border-radius: calc($rad - 0.5rem);
-    } @else {
-        border-radius: 3px;
-    }
+  @if calc($rad - 0.5rem) > 0 {
+    border-radius: calc($rad - 0.5rem);
+  } @else {
+    border-radius: 3px;
+  }
 
-    font-family: $font-body;
+  font-family: $font-body;
 
-    &::before {
-        content: '# ';
-    }
+  &::before {
+    content: "# ";
+  }
 }
 
 /*
@@ -392,124 +396,194 @@
  |-------------------------------------------------------------
 */
 .group-banner {
-    position: relative;
+  position: relative;
 }
 
 .group-description {
-    height: auto;
-    width: auto;
+  height: auto;
+  width: auto;
 
-    position: relative;
+  position: relative;
 
-    z-index: +1;
+  z-index: +1;
 
-    h2 {
-        span {
-            margin-left: 0.25rem;
+  h2 {
+    span {
+      margin-left: 0.25rem;
 
-            font-size: 16px;
-        }
-        a {
-            margin-left: 0.25rem;
-
-            font-size: 16px;
-
-            color: $page-accent;
-
-            text-decoration: none;
-        }
+      font-size: 16px;
     }
-
-    & > * {
-        margin: 0 0 0.5rem 0;
-    }
-
     a {
-        text-decoration: none;
+      margin-left: 0.25rem;
 
-        &:hover {
-            color: $page-accent;
-        }
-    }
+      font-size: 16px;
 
-    .btn:hover {
-        color: $fg;
+      color: $page-accent;
+
+      text-decoration: none;
     }
+  }
+
+  & > * {
+    margin: 0 0 0.5rem 0;
+  }
+
+  a {
+    text-decoration: none;
+
+    &:hover {
+      color: $page-accent;
+    }
+  }
+
+  .btn:hover {
+    color: $fg;
+  }
 }
 
 .group-cover {
+  height: 100%;
+  max-width: 50%;
+  width: auto;
+
+  position: absolute;
+
+  display: inline-block;
+
+  right: 0;
+  top: 0;
+
+  overflow: hidden;
+
+  z-index: 0;
+
+  span {
+    width: 100%;
     height: 100%;
-    max-width: 50%;
-    width: auto;
 
     position: absolute;
 
-    display: inline-block;
+    background: linear-gradient(to right, $bg, rgba($bg, 0.8), rgba($bg, 0.2));
 
-    right: 0;
-    top: 0;
+    z-index: +1;
 
-    overflow: hidden;
+    border-radius: calc($rad - $border-thickness);
+  }
 
-    z-index: 0;
+  img {
+    width: 100%;
+    height: 100%;
 
-    span {
-        width: 100%;
-        height: 100%;
+    object-fit: cover;
 
-        position: absolute;
+    margin-left: auto;
 
-        background: linear-gradient(to right, $bg, rgba($bg, 0.8), rgba($bg, 0.2));
-
-        z-index: +1;
-
-        border-radius: calc($rad - $border-thickness);
-    }
-
-    img {
-        width: 100%;
-        height: 100%;
-
-        object-fit: cover;
-
-        margin-left: auto;
-
-        border-radius: calc($rad - $border-thickness);
-    }
+    border-radius: calc($rad - $border-thickness);
+  }
 }
 
 .selectedImage {
-    outline: $page-accent solid 0.3rem;
-    transform: scale(0.8) !important;
+  outline: $page-accent solid 0.3rem;
+  transform: scale(0.8) !important;
 }
 .group-name {
-    margin: 0;
+  margin: 0;
 
-    max-width: 90%;
+  max-width: 90%;
 
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translateX(-50%) translateY(-50%);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
 
-    transition: opacity 0.1s cubic-bezier(.19, 1, .22, 1);
+  transition: opacity 0.1s cubic-bezier(0.19, 1, 0.22, 1);
 
-    z-index: 6;
+  z-index: 6;
 
-    opacity: 0;
-    font-size: 17px;
-    font-family: $font-body;
-    text-decoration: none;
-    text-align: center;
-    text-overflow: ellipsis;
+  opacity: 0;
+  font-size: 17px;
+  font-family: $font-body;
+  text-decoration: none;
+  text-align: center;
+  text-overflow: ellipsis;
 
-    overflow-x: hidden;
+  overflow-x: hidden;
 }
 
 .gallery-group {
+  width: 100%;
+  height: 100%;
+
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+
+  position: absolute;
+  z-index: 5;
+}
+
+.group-item {
+  & .gallery-group {
+    backdrop-filter: brightness(0.5);
+  }
+  & .nsfw-warning > * {
+    display: none;
+  }
+  & .group-name {
+    opacity: 1;
+  }
+}
+
+.group-make {
+  margin: 0;
+  padding: 0;
+
+  height: auto;
+
+  @if calc($rad - 0.5rem) > 0 {
+    border-radius: calc($rad - 0.5rem);
+  } @else {
+    border-radius: 3px;
+  }
+
+  position: relative;
+
+  overflow: hidden;
+
+  flex: 1 0 150px;
+
+  text-overflow: ellipsis;
+
+  transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
+
+  &:hover {
+    outline: $white 0.2rem solid;
+  }
+
+  &:after {
+    content: "";
+    display: block;
+    padding-bottom: 100%;
+  }
+
+  button {
+    @include flexDown(center);
+    align-items: center;
+
     width: 100%;
     height: 100%;
 
+    padding: 0;
+
+    background-color: $black;
+    @if calc($rad - 0.5rem) > 0 {
+      border-radius: calc($rad - 0.5rem);
+    } @else {
+      border-radius: 3px;
+    }
+    border: none;
+
     top: 0;
     bottom: 0;
     left: 0;
@@ -517,104 +591,34 @@
 
     position: absolute;
     z-index: 5;
-}
 
-.group-item {
-    & .gallery-group {
-        backdrop-filter: brightness(0.5);
-    }
-    & .nsfw-warning > * {
-        display: none;
-    }
-    & .group-name {
-        opacity: 1;
-    }
-}
-
-.group-make {
-    margin: 0;
-    padding: 0;
-
-    height: auto;
-
-    @if calc($rad - 0.5rem) > 0 {
-        border-radius: calc($rad - 0.5rem);
-    } @else {
-        border-radius: 3px;
-    }
-
-    position: relative;
-
-    overflow: hidden;
-
-    flex: 1 0 150px;
-
-    text-overflow: ellipsis;
-
-    transition: outline 0.1s cubic-bezier(.19, 1, .22, 1);
+    text-decoration: none;
+    font-family: $font-body;
 
     &:hover {
-        outline: $white 0.2rem solid;
+      color: $fg;
+
+      cursor: pointer;
     }
 
-    &:after {
-        content: "";
-        display: block;
-        padding-bottom: 100%;
+    span {
+      max-width: 90%;
+      text-align: center;
+      text-overflow: ellipsis;
     }
 
-    button {
-        @include flexDown(center);
-        align-items: center;
+    img {
+      margin: 0.25rem;
 
-        width: 100%;
-        height: 100%;
-        
-        padding: 0;
-
-        background-color: $black;
-        @if calc($rad - 0.5rem) > 0 {
-        border-radius: calc($rad - 0.5rem);
-    } @else {
-        border-radius: 3px;
-    }
-        border: none;
-
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-
-        position: absolute;
-        z-index: 5;
-
-        text-decoration: none;
-        font-family: $font-body;
-
-        &:hover {
-            color: $fg;
-
-            cursor: pointer;
-        }
-
-        span {
-            max-width: 90%;
-            text-align: center;
-            text-overflow: ellipsis;
-        }
-
-        img {
-            margin: 0.25rem;
-
-            width: 2.5rem;
-            height: 2.5rem;
-        }
+      width: 2.5rem;
+      height: 2.5rem;
     }
+  }
 }
 @media (max-width: 550px) {
-    .group-make > button > span {
-        display: none;
-    }
+  .group-make > button > span {
+    display: none;
+  }
 }
 /*
  |-------------------------------------------------------------
@@ -622,71 +626,73 @@
  |-------------------------------------------------------------
 */
 .profile-root {
-    margin: 3rem auto 1rem auto;
-    
-    min-height: 7rem;
+  margin: 3rem auto 1rem auto;
 
-    position: relative;
+  min-height: 7rem;
 
-    text-align: center;
+  position: relative;
 
-    img {
-        width: 9rem;
-        height: 9rem;
-        object-fit: cover;
+  text-align: center;
 
-        position: absolute;
-        left: 6rem;
-        top: -3rem;
-        transform: translateX(-50%);
+  img {
+    width: 9rem;
+    height: 9rem;
+    object-fit: cover;
 
-        border-radius: $rad;
-        border: $border;
+    position: absolute;
+    left: 6rem;
+    top: -3rem;
+    transform: translateX(-50%);
 
-        background-color: $bg;
-    }
-    h2, & > p {
-        margin: 0 0 0.5rem 0;
-        padding-left: 11rem;
-    }
+    border-radius: $rad;
+    border: $border;
+
+    background-color: $bg;
+  }
+  h2,
+  & > p {
+    margin: 0 0 0.5rem 0;
+    padding-left: 11rem;
+  }
 }
 .profile-info {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  padding-left: 11rem;
+
+  display: flex;
+  flex-direction: column;
+
+  text-align: center;
+  & > * {
     margin-top: 0;
     margin-bottom: 0.5rem;
-    padding-left: 11rem;
-
-    display: flex; flex-direction: column;
-
-    text-align: center;
-    & > * {
-        margin-top: 0;
-        margin-bottom: 0.5rem;
-    }
+  }
 }
 
 @media (max-width: 669px) {
-    .profile-root {
-        img {
-            position: absolute;
-            left: 50%;
-            top: -3rem;
-            transform: translateX(-50%);
-        }
-        h2 {
-            margin: 7rem 0 0.5rem 0;
-            padding: 0;
-        }
-        & > p {
-            padding: 0;
-        }
+  .profile-root {
+    img {
+      position: absolute;
+      left: 50%;
+      top: -3rem;
+      transform: translateX(-50%);
     }
-    .profile-info {
-        padding: 0;
-    
-        & > * {
-            padding: 0;
-        }
+    h2 {
+      margin: 7rem 0 0.5rem 0;
+      padding: 0;
     }
+    & > p {
+      padding: 0;
+    }
+  }
+  .profile-info {
+    padding: 0;
+
+    & > * {
+      padding: 0;
+    }
+  }
 }
 
 /*
@@ -694,20 +700,20 @@
  | UPLOAD
  |-------------------------------------------------------------
 */
-.upload-root  > img {
-    margin: 0 auto;
+.upload-root > img {
+  margin: 0 auto;
 
-    max-width: 100%;
-    max-height: 15rem;
+  max-width: 100%;
+  max-height: 15rem;
 
-    @if calc($rad - 0.5rem) > 0 {
-        border-radius: calc($rad - 0.5rem);
-    } @else {
-        border-radius: 3px;
-    }
+  @if calc($rad - 0.5rem) > 0 {
+    border-radius: calc($rad - 0.5rem);
+  } @else {
+    border-radius: 3px;
+  }
 
-    display: flex;
-    flex-direction: column;
+  display: flex;
+  flex-direction: column;
 }
 
 /*
@@ -716,283 +722,294 @@
  |-------------------------------------------------------------
 */
 #pfpForm {
-    display: flex;
-    flex-direction: row;
-    gap: 0.5rem;
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
 
-    > * {
-        margin: 0;
-    }
+  > * {
+    margin: 0;
+  }
 }
 
 .tabs {
-    display: flex; flex-direction: row;
+  display: flex;
+  flex-direction: row;
 
-    & > button {
-        margin-right: 0.5rem;
-        width: 33.33%;
-    }
-    & > button:last-child {
-        margin-right: 0;
-    }
+  & > button {
+    margin-right: 0.5rem;
+    width: 33.33%;
+  }
+  & > button:last-child {
+    margin-right: 0;
+  }
 }
 .active-tab {
-    background-color: $page-accent !important;
-    background-image: linear-gradient(to top, darken($page-accent, 5%), $page-accent) !important;
+  background-color: $page-accent !important;
+  background-image: linear-gradient(
+    to top,
+    darken($page-accent, 5%),
+    $page-accent
+  ) !important;
 }
 
 .logs {
-    width: 100%;
-    height: 0;
-    
-    margin-bottom: 0;
-    padding: 0;
+  width: 100%;
+  height: 0;
 
-    overflow-y: hidden;
+  margin-bottom: 0;
+  padding: 0;
 
-    display: flex;
-    flex-direction: column;
+  overflow-y: hidden;
 
-    background-color: $bg;
-    @if calc($rad - 0.5rem) > 0 {
-        border-radius: calc($rad - 0.5rem);
-    } @else {
-        border-radius: 3px;
-    }
+  display: flex;
+  flex-direction: column;
 
-    transition: height 0.3s cubic-bezier(.19, 1, .22, 1), transform 0.3s cubic-bezier(.19, 1, .22, 1);
+  background-color: $bg;
+  @if calc($rad - 0.5rem) > 0 {
+    border-radius: calc($rad - 0.5rem);
+  } @else {
+    border-radius: 3px;
+  }
+
+  transition: height 0.3s cubic-bezier(0.19, 1, 0.22, 1),
+    transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
 }
 .log {
-    min-width: 850px;
+  min-width: 850px;
 
-    padding: 0.5rem;
+  padding: 0.5rem;
 
-    display: flex; flex-direction: row;
+  display: flex;
+  flex-direction: row;
 
-    justify-content: space-between;
+  justify-content: space-between;
 
-    &:nth-child(even) {
-        background-color: #E8E3E311;
+  &:nth-child(even) {
+    background-color: #e8e3e311;
+  }
+
+  & > * {
+    margin: 0 0.5rem 0 0;
+    padding: 0;
+    word-wrap: break-word;
+
+    &:nth-child(1) {
+      width: 5%;
     }
-
-    & > * {
-        margin: 0 0.5rem 0 0;
-        padding: 0;
-        word-wrap: break-word;
-
-        &:nth-child(1) {
-            width: 5%;
-        }
-        &:nth-child(2) {
-            width: 17%;
-        }
-        &:nth-child(3) {
-            width: 38%;
-        }
-        &:nth-child(4) {
-            width: 40%;
-            margin: 0;
-        }
+    &:nth-child(2) {
+      width: 17%;
     }
+    &:nth-child(3) {
+      width: 38%;
+    }
+    &:nth-child(4) {
+      width: 40%;
+      margin: 0;
+    }
+  }
 }
 .log:first-of-type {
-    background-color: $bg;
-    position: sticky;
-    top: 0;
-    z-index: 2;
+  background-color: $bg;
+  position: sticky;
+  top: 0;
+  z-index: 2;
 }
 
 .bans {
-    width: 100%;
-    height: 0;
+  width: 100%;
+  height: 0;
 
-    margin-bottom: 0;
-    padding: 0;
+  margin-bottom: 0;
+  padding: 0;
 
-    overflow-y: hidden;
+  overflow-y: hidden;
 
-    display: flex;
-    flex-direction: column;
+  display: flex;
+  flex-direction: column;
 
-    background-color: $bg;
-    @if calc($rad - 0.5rem) > 0 {
-        border-radius: calc($rad - 0.5rem);
-    } @else {
-        border-radius: 3px;
-    }
+  background-color: $bg;
+  @if calc($rad - 0.5rem) > 0 {
+    border-radius: calc($rad - 0.5rem);
+  } @else {
+    border-radius: 3px;
+  }
 
-    transition: height 0.3s cubic-bezier(.19, 1, .22, 1), transform 0.3s cubic-bezier(.19, 1, .22, 1);
+  transition: height 0.3s cubic-bezier(0.19, 1, 0.22, 1),
+    transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
 }
 .ban {
-    min-width: 900px;
+  min-width: 900px;
 
-    padding: 0.5rem;
+  padding: 0.5rem;
 
-    display: flex; flex-direction: row;
+  display: flex;
+  flex-direction: row;
 
-    justify-content: space-between;
+  justify-content: space-between;
 
-    &:nth-child(even) {
-        background-color: #E8E3E311;
+  &:nth-child(even) {
+    background-color: #e8e3e311;
+  }
+
+  & > * {
+    margin: 0 0.5rem 0 0;
+    padding: 0;
+    word-wrap: break-word;
+
+    &:nth-child(1) {
+      width: 5%;
     }
-
-    & > * {
-        margin: 0 0.5rem 0 0;
-        padding: 0;
-        word-wrap: break-word;
-
-        &:nth-child(1) {
-            width: 5%;
-        }
-        &:nth-child(2) {
-            width: 17%;
-        }
-        &:nth-child(3) {
-            width: 34%;
-        }
-        &:nth-child(4) {
-            width: 10%;
-        }
-        &:nth-child(5) {
-            width: 34%;
-            margin: 0;
-        }
+    &:nth-child(2) {
+      width: 17%;
     }
+    &:nth-child(3) {
+      width: 34%;
+    }
+    &:nth-child(4) {
+      width: 10%;
+    }
+    &:nth-child(5) {
+      width: 34%;
+      margin: 0;
+    }
+  }
 }
 .perm {
-    border-left: $border;
+  border-left: $border;
 }
 .ban:first-of-type {
-    background-color: $bg;
-    position: sticky;
-    top: 0;
-    z-index: 2;
+  background-color: $bg;
+  position: sticky;
+  top: 0;
+  z-index: 2;
 }
 
 .user-settings {
-    width: 100%;
-    height: 0;
+  width: 100%;
+  height: 0;
 
-    margin-bottom: 0;
-    padding: 0;
+  margin-bottom: 0;
+  padding: 0;
 
-    overflow-y: hidden;
+  overflow-y: hidden;
 
-    display: flex;
-    flex-direction: column;
+  display: flex;
+  flex-direction: column;
 
-    background-color: $bg;
-    @if calc($rad - 0.5rem) > 0 {
-        border-radius: calc($rad - 0.5rem);
-    } @else {
-        border-radius: 3px;
-    }
+  background-color: $bg;
+  @if calc($rad - 0.5rem) > 0 {
+    border-radius: calc($rad - 0.5rem);
+  } @else {
+    border-radius: 3px;
+  }
 
-    transition: height 0.3s cubic-bezier(.19, 1, .22, 1), transform 0.3s cubic-bezier(.19, 1, .22, 1);
+  transition: height 0.3s cubic-bezier(0.19, 1, 0.22, 1),
+    transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
 }
 .user {
-    min-width: 950px;
+  min-width: 950px;
 
-    padding: 0.5rem;
+  padding: 0.5rem;
 
-    display: flex; flex-direction: row;
+  display: flex;
+  flex-direction: row;
 
-    justify-content: space-between;
+  justify-content: space-between;
 
-    &:nth-child(even) {
-        background-color: #E8E3E311;
+  &:nth-child(even) {
+    background-color: #e8e3e311;
+  }
+
+  & > * {
+    margin: 0 0.5rem 0 0;
+    padding: 0;
+    word-wrap: break-word;
+
+    &:nth-child(1) {
+      width: 5%;
     }
-
-    & > * {
-        margin: 0 0.5rem 0 0;
-        padding: 0;
-        word-wrap: break-word;
-
-        &:nth-child(1) {
-            width: 5%;
-        }
-        &:nth-child(2) {
-            width: 15%;
-        }
-        &:nth-child(3) {
-            width: 35%;
-        }
-        &:nth-child(4) {
-            width: 15%;
-        }
-        &:nth-child(5) {
-            width: 15%;
-        }
-        &:nth-child(6) {
-            width: 15%;
-            margin: 0;
-        }
+    &:nth-child(2) {
+      width: 15%;
     }
+    &:nth-child(3) {
+      width: 35%;
+    }
+    &:nth-child(4) {
+      width: 15%;
+    }
+    &:nth-child(5) {
+      width: 15%;
+    }
+    &:nth-child(6) {
+      width: 15%;
+      margin: 0;
+    }
+  }
 }
 .is-admin {
-    border-left: $border;
-    //background-image: linear-gradient(to right, rgba($page-accent, 0.3), rgba($page-accent, 0));
+  border-left: $border;
+  //background-image: linear-gradient(to right, rgba($page-accent, 0.3), rgba($page-accent, 0));
 }
 .user:first-of-type {
-    background-color: $bg;
-    position: sticky;
-    top: 0;
-    z-index: 2;
+  background-color: $bg;
+  position: sticky;
+  top: 0;
+  z-index: 2;
 }
 
 .btn-code {
-    color: #00000000;
-    position: relative;
+  color: #00000000;
+  position: relative;
+
+  &::before {
+    content: "Hover to reveal";
+    color: $fg;
+
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  &:hover {
+    color: $fg;
 
     &::before {
-        content: "Hover to reveal";
-        color: $fg;
-
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-    }
-
-    &:hover {
-        color: $fg;
-
-        &::before {
-            content: "";
-        }
+      content: "";
     }
+  }
 }
 
 .btn-icon {
-    width: auto !important;
-    display: inline-block !important;
+  width: auto !important;
+  display: inline-block !important;
 
-    img {
-        margin: auto 2px;
+  img {
+    margin: auto 2px;
 
-        width: 1.25rem;
-        height: 1.25rem;
+    width: 1.25rem;
+    height: 1.25rem;
 
-        display: block;
-    }
+    display: block;
+  }
 }
 
 #sanityCheck {
-    padding: 0;
+  padding: 0;
 
-    display: flex;
-    flex-direction: column;
+  display: flex;
+  flex-direction: column;
 
-    opacity: 0;
-    transform: scale(0.8);
+  opacity: 0;
+  transform: scale(0.8);
 
-    transition: all 0.3s cubic-bezier(.19, 1, .22, 1);
+  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
 
-    > * {
-        margin: 0 0 0.5rem 0;
-    }
+  > * {
+    margin: 0 0 0.5rem 0;
+  }
 
-    & > *:last-child {
-        margin: 0;
-    }
-}
\ No newline at end of file
+  & > *:last-child {
+    margin: 0;
+  }
+}
diff --git a/css/scss/_footer.scss b/css/scss/_footer.scss
index def0f47..13ddbf6 100644
--- a/css/scss/_footer.scss
+++ b/css/scss/_footer.scss
@@ -1,41 +1,42 @@
 /*
- |-------------------------------------------------------------
- | FOOTER
- |-------------------------------------------------------------
+|-------------------------------------------------------------
+| FOOTER
+|-------------------------------------------------------------
 */
 footer {
-    margin: 0 auto;
+  margin: 0 auto;
 
-    width: auto;
+  width: auto;
 
-    text-align: center;
-    font-size: 12px;
-    text-transform: uppercase;
+  text-align: center;
+  font-size: 12px;
+  text-transform: uppercase;
 
-    display: flex; flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 0.5rem;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.5rem;
 
-    p {
-        margin: 0;
-        padding: 0;
+  p {
+    margin: 0;
+    padding: 0;
 
-        text-decoration: none;
+    text-decoration: none;
 
-        font-family: $font-body;
+    font-family: $font-body;
+  }
+
+  a {
+    margin: 0;
+    padding: 0;
+
+    text-decoration: none;
+
+    font-family: $font-body;
+
+    &:hover {
+      color: $orange;
     }
-
-    a {
-        margin: 0;
-        padding: 0;
-
-        text-decoration: none;
-
-        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 7db48bf..a5eea51 100644
--- a/css/scss/_mixin.scss
+++ b/css/scss/_mixin.scss
@@ -1,61 +1,60 @@
 @mixin defaultDecoration($border-colour) {
-    background-color: $bg;
-    color: $fg;
+  background-color: $bg;
+  color: $fg;
 
-    border-radius: $rad;
-    border: $border-colour $border-thickness solid;
+  border-radius: $rad;
+  border: $border-colour $border-thickness solid;
 
-    box-shadow: $shadow;
+  box-shadow: $shadow;
 }
 
 @mixin defaultSpacing() {
-    margin-bottom: 1rem;
-    padding: 0.5rem 0.5rem 0 0.5rem;
+  margin-bottom: 1rem;
+  padding: 0.5rem 0.5rem 0 0.5rem;
 
-    width: 100%;
+  width: 100%;
 
-    box-sizing: border-box;
+  box-sizing: border-box;
 
-    >* {
-        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;
+    text-rendering: optimizeLegibility;
+  }
 
-    h1,
-    h2,
-    h3,
-    h4,
-    h5 {
-        font-family: $font-header;
-        text-rendering: optimizeLegibility;
-    }
-
-    p,
-    a,
-    button,
-    input {
-        font-family: $font-body;
-        text-rendering: optimizeLegibility;
-    }
+  p,
+  a,
+  button,
+  input {
+    font-family: $font-body;
+    text-rendering: optimizeLegibility;
+  }
 }
 
 @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;
-}
\ No newline at end of file
+  justify-content: $justify;
+}
diff --git a/css/scss/_navigation.scss b/css/scss/_navigation.scss
index 0a807fe..19fa4e4 100644
--- a/css/scss/_navigation.scss
+++ b/css/scss/_navigation.scss
@@ -4,146 +4,146 @@
  |-------------------------------------------------------------
 */
 nav {
-    @include defaultDecoration($page-accent);
-    @include flexLeft(space-between);
+  @include defaultDecoration($page-accent);
+  @include flexLeft(space-between);
 
-    margin: 0 auto 1rem;
-    padding: 0.5rem;
+  margin: 0 auto 1rem;
+  padding: 0.5rem;
 
-    width: 100%;
-    height: auto;
+  width: 100%;
+  height: auto;
 
-    background-color: $bg-alt;
-    backdrop-filter: blur(69px) saturate(100%) brightness(100%);
+  background-color: $bg-alt;
+  backdrop-filter: blur(69px) saturate(100%) brightness(100%);
 
-    box-sizing: border-box;
+  box-sizing: border-box;
 
-    position: sticky;
-    z-index: 99;
-    top: 1rem;
+  position: sticky;
+  z-index: 99;
+  top: 1rem;
 
-    align-items: center;
+  align-items: center;
+  vertical-align: middle;
+
+  p {
+    margin: 0;
     vertical-align: middle;
+  }
 
-    p {
-        margin: 0;
-        vertical-align: middle;
-    }
+  hr {
+    margin: 0.5rem 0.2rem;
+    padding: 0;
+    opacity: 0;
+  }
 
-    hr {
-        margin: 0.5rem 0.2rem;
-        padding: 0;
-        opacity: 0;
-    }
-
-    .btn {
-        width: auto;
-    }
+  .btn {
+    width: auto;
+  }
 }
 
 .nav-name {
-    @include flexLeft(space-around);
+  @include flexLeft(space-around);
 
-    margin: 0;
+  margin: 0;
 
-    font-family: $font-header;
+  font-family: $font-header;
 
-    font-size: 1.5rem;
-    line-height: 1.69rem;
+  font-size: 1.5rem;
+  line-height: 1.69rem;
 
-    img {
-        margin: 0 0.5rem 0 0;
-        padding: 0;
+  img {
+    margin: 0 0.5rem 0 0;
+    padding: 0;
 
-        width: 1.69rem;
-        height: 1.69rem;
+    width: 1.69rem;
+    height: 1.69rem;
 
-        //vertical-align: middle;
+    //vertical-align: middle;
 
-        display: inline;
+    display: inline;
 
-        @if calc($rad - 0.5rem) > 0 {
-            border-radius: calc($rad - 0.3rem);
-        } @else {
-            border-radius: 3px;
-        }
+    @if calc($rad - 0.5rem) > 0 {
+      border-radius: calc($rad - 0.3rem);
+    } @else {
+      border-radius: 3px;
     }
+  }
 }
 
 .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;
 
-    a.btn {
-        padding: 0.2rem 0.5rem;
-    }
+  a.btn {
+    padding: 0.2rem 0.5rem;
+  }
 }
 
 .nav-mobile {
-    display: none;
+  display: none;
 }
 
 @media (max-width: 800px) {
-    .nav-name {
-        display: none;
-    }
+  .nav-name {
+    display: none;
+  }
 
-    .nav-links {
-        width: 100%;
-    }
+  .nav-links {
+    width: 100%;
+  }
 }
 
 @media (max-width: 550px) {
-    nav {
-        margin: 0;
-        padding-bottom: 1rem;
+  nav {
+    margin: 0;
+    padding-bottom: 1rem;
 
-        position: fixed;
-        top: auto;
-        bottom: 0;
-        left: 0;
-        right: 0;
+    position: fixed;
+    top: auto;
+    bottom: 0;
+    left: 0;
+    right: 0;
 
-        border: none;
-        border-top: $border;
-        border-radius: 0;
+    border: none;
+    border-top: $border;
+    border-radius: 0;
 
-        backdrop-filter: blur(16px);
+    backdrop-filter: blur(16px);
 
-        .svg {
-            margin: 0;
+    .svg {
+      margin: 0;
 
-            display: block;
-        }
+      display: block;
     }
+  }
 
-    .nav-links {
-        a.btn {
-            padding: 0.5rem;
-        }
+  .nav-links {
+    a.btn {
+      padding: 0.5rem;
     }
+  }
 
-    .nav-hide {
-        display: none;
-    }
+  .nav-hide {
+    display: none;
+  }
 
-    .info-text {
-        text-align: left !important;
-    }
+  .info-text {
+    text-align: left !important;
+  }
 
-    footer {
-        margin-bottom: 4rem !important;
-    }
+  footer {
+    margin-bottom: 4rem !important;
+  }
 
-    #back-to-top {
-        bottom: 5rem !important;
-    }
-    .nav-mobile {
-        display: block;
-    }
-}
\ No newline at end of file
+  #back-to-top {
+    bottom: 5rem !important;
+  }
+  .nav-mobile {
+    display: block;
+  }
+}
diff --git a/css/scss/_variables.scss b/css/scss/_variables.scss
index 68226f1..60437c0 100644
--- a/css/scss/_variables.scss
+++ b/css/scss/_variables.scss
@@ -1,20 +1,20 @@
 $bg: #151515;
 $bg-alt: #151515bb;
 
-$fg: #E8E3E3;
+$fg: #e8e3e3;
 $fg-alt: #151515;
 
-$red: #B66467;
-$orange: #D8A657;
-$yellow: #D9BC8C;
-$green: #8C977D;
-$blue: #8DA3B9;
-$purple: #A988B0;
+$red: #b66467;
+$orange: #d8a657;
+$yellow: #d9bc8c;
+$green: #8c977d;
+$blue: #8da3b9;
+$purple: #a988b0;
 
 $black: #121212;
-$white: #E8E3E3;
+$white: #e8e3e3;
 
-$page-accent: #8C977D;
+$page-accent: #8c977d;
 $warning: $red;
 $alert: $orange;
 $success: $green;
@@ -29,18 +29,15 @@ $border: $page-accent $border-thickness solid;
 $weight-bold: 621;
 $weight-normal: 400;
 
-$font-header: 'Lexend Deca',
-sans-serif;
-$font-body: 'Secular One',
-sans-serif;
-$font-code: 'JetBrains Mono',
-monospace;
+$font-header: "Lexend Deca", sans-serif;
+$font-body: "Secular One", sans-serif;
+$font-code: "JetBrains Mono", monospace;
 
 // Fallback for items that do not yet support the new sass stylesheet system
 :root {
   --bg: #{$bg-alt};
   --bg-1: #242621;
-  --bg-2: #1D1E1C;
+  --bg-2: #1d1e1c;
   --bg-3: #{$bg};
 
   --fg: #{$fg};
@@ -65,4 +62,4 @@ monospace;
   --shadow: #{$shadow};
   --rad: #{$rad};
   --border: #{$border};
-}
\ No newline at end of file
+}