[S] Style home page

AquaNet/src/pages/Home.svelte

@@ -1,9 +1,15 @@
-<main id="home">
+<main id="home" class="no-margin">
   <h1>AquaNet</h1>
-  <div>
+  <div class="btn-group">
     <button>Login</button>
     <button>Sign Up</button>
   </div>
+
+  <div class="light-pollution">
+    <div class="l1"></div>
+    <div class="l2"></div>
+    <div class="l3"></div>
+  </div>
 </main>
 
 <style lang="sass">
@@ -11,6 +17,17 @@
 
   #home
     color: $c-main
+    position: relative
+    width: 100%
+    height: 100%
+    padding-left: 100px
+    overflow: hidden
+
+    box-sizing: border-box
+
+    display: flex
+    flex-direction: column
+    justify-content: center
 
     > h1
       font-family: Quicksand, $font
@@ -18,9 +35,44 @@
 
       // Gap between text characters
       letter-spacing: 0.2em
+      margin-top: 0
+      opacity: 0.9
     
-    > div
+    .btn-group
       display: flex
       gap: 8px
-    
+
+    .light-pollution
+      pointer-events: none
+      opacity: 0.6
+
+      > div
+        position: absolute
+        z-index: -1
+
+      .l1
+        left: -560px
+        top: 90px
+        height: 1130px
+        width: 1500px
+        $color: rgb(158, 110, 230)
+        background: radial-gradient(50% 50% at 50% 50%, rgba($color, 0.28) 0%, rgba($color, 0) 100%)
+
+      .l2
+        left: -200px
+        top: 560px
+        height: 1200px
+        width: 1500px
+        $color: rgb(92, 195, 250)
+        background: radial-gradient(50% 50% at 50% 50%, rgba($color, 0.28) 0%, rgba($color, 0) 100%)
+
+      .l3
+        left: -600px
+        opacity: 0.7
+        top: -630px
+        width: 1500px
+        height: 1000px
+        $color: rgb(230, 110, 156)
+        background: radial-gradient(50% 50% at 50% 50%, rgba($color, 0.28) 0%, rgba($color, 0) 100%)
+
 </style>