improve gradient

src/base.css

@@ -53,8 +53,8 @@ main {
 }
 
 #background-wrapper #grass-1 {
-  --color-1: hsl(120, 50%, 50%);
-  --color-2: hsl(120, 50%, 40%);
+  --color-1: hsl(150, 100%, 30%);
+  --color-2: hsl(150, 100%, 25%);
 
   background-image: linear-gradient(
     350deg,
@@ -69,28 +69,10 @@ main {
   --color-2: hsl(110, 100%, 35%);
 
   background-image: linear-gradient(
-    4deg,
+    9deg,
     var(--color-1),
-    var(--color-2) 25%,
-    transparent 30%
-  );
-}
-
-#background-wrapper #sun {
-  top: -20%;
-  left: -200%;
-  right: -100%;
-  bottom: -50%;
-
-  --color-1: hsl(23, 100%, 50%);
-  --color-2: hsl(36.5, 100%, 50%);
-  --color-3: hsl(44.9, 100%, 50%);
-
-  background-image: radial-gradient(
-    var(--color-1),
-    var(--color-2) 10%,
-    var(--color-3) 20%,
-    transparent 40%
+    var(--color-2) 30%,
+    transparent 35%
   );
 }
 
@@ -113,10 +95,4 @@ main {
     --color-1: hsl(110, 60%, 30%);
     --color-2: hsl(110, 50%, 24%);
   }
-
-  #background-wrapper #sun {
-    --color-1: hsl(9, 100%, 50%);
-    --color-2: hsl(36.5, 100%, 40%);
-    --color-3: hsl(44.9, 100%, 30%);
-  }
 }

src/index.tsx

@@ -46,7 +46,6 @@ chatListViewModel.selectedChat.subscribe(() => {
 document.body.append(
   <div id="background-wrapper">
     <div id="sky"></div>
-    <div id="sun"></div>
     <div id="grass-1"></div>
     <div id="grass-2"></div>
   </div>