[+] Implement user settings

AquaNet/src/app.sass

@@ -158,7 +158,8 @@ input.error
   user-select: none
 
 
-main.content
+// Content containers
+.content-main
   display: flex
   flex-direction: column
   gap: 20px
@@ -167,7 +168,7 @@ main.content
   min-height: 100%
   max-width: $w-max
 
-  background-color: rgba(black, 0.2)
+  background-color: darken($c-bg, 3%)
   border-radius: 16px 16px 0 0
 
   @media (max-width: #{$w-max + (64px) * 2})
@@ -178,15 +179,36 @@ main.content
 
   > h2.outer-title
     margin-top: -3.5rem
-    //color: transparent
-    //background-color: rgba($c-main, 70%)
-    //-webkit-background-clip: text
-    //background-clip: text
-    //text-shadow: rgb(0 0 0 / 50%) 0 5px 6px
 
     @media (max-width: $w-mobile)
       text-align: center
 
+main.content
+  @extend .content-main
+
+// Not used. still need a lot of work
+.content-popup
+  position: absolute
+  inset: 0
+
+  > div
+    @extend .content-main
+    position: absolute
+    inset: 0
+    top: 100px
+    background: rgba(darken($c-bg, 3%), 0.9)
+    backdrop-filter: blur(5px)
+    box-shadow: 0 0 10px 6px rgba(black, 0.4)
+    max-width: calc($w-max + 20px)
+
+    @media (max-width: #{$w-max + (64px) * 2})
+      margin: 100px 22px 0
+
+    @media (max-width: $w-mobile)
+      margin: 100px 0 0
+
+
+
 // Overlay
 .overlay
   position: fixed