fix layout, update colors

src/base.css

@@ -1,16 +1,18 @@
-#home-page {
-  --background-transparent: hsla(0, 0%, 100%, 40%);
-  --surface: hsla(0, 0%, 100%, 40%);
-  --surface-hover: hsla(0, 0%, 91%, 40%);
-  --surface-active: hsla(0, 0%, 78%, 40%);
-}
-
-@media (prefers-color-scheme: dark) {
+@media (display-mode: browser) {
   #home-page {
-    --background-transparent: hsla(0, 0%, 5%, 30%);
-    --surface: hsla(0, 0%, 5%, 30%);
-    --surface-hover: hsla(0, 0%, 20%, 30%);
-    --surface-active: hsla(0, 0%, 44%, 30%);
+    --background-transparent: hsla(0, 0%, 100%, 40%);
+    --surface: hsla(0, 0%, 100%, 40%);
+    --surface-hover: hsla(0, 0%, 91%, 40%);
+    --surface-active: hsla(0, 0%, 78%, 40%);
+  }
+
+  @media (prefers-color-scheme: dark) {
+    #home-page {
+      --background-transparent: hsla(0, 0%, 5%, 30%);
+      --surface: hsla(0, 0%, 5%, 30%);
+      --surface-hover: hsla(0, 0%, 20%, 30%);
+      --surface-active: hsla(0, 0%, 44%, 30%);
+    }
   }
 }
 
@@ -22,13 +24,17 @@
   right: -120px;
   bottom: -120px;
 
-  z-index: -1;
+  z-index: 1;
   pointer-events: none;
 
   filter: blur(60px);
   opacity: 0.2;
 }
 
+main {
+  z-index: 2;
+}
+
 #background::after,
 #background::before {
   content: "";
@@ -43,13 +49,26 @@
   #background {
     background-image: linear-gradient(
       120deg,
-      hsla(210, 100%, 50%, 50%),
-      hsla(210, 100%, 50%, 35%),
-      transparent 40%
+      hsla(210, 100%, 50%, 60%),
+      hsla(210, 100%, 50%, 55%),
+      transparent 60%
     );
   }
 }
 
+@media (display-mode: standalone) {
+  @media (prefers-color-scheme: dark) {
+    #background {
+      background-image: linear-gradient(
+        120deg,
+        hsla(210, 100%, 50%, 80%),
+        hsla(210, 100%, 50%, 75%),
+        transparent 60%
+      );
+    }
+  }
+}
+
 @media (prefers-color-scheme: light) {
   #background {
     background-image: linear-gradient(