Add star component

src/components/blog/Background.astro

···
 ---
 import Cloud from "./background/Cloud.astro";
 import Moon from "./background/Moon.astro";
+import Star from "./background/Star.astro";
 import Sun from "./background/Sun.astro";
 ---
 
···
   <Cloud />
   <Sun />
   <Moon />
+  <Star />
 </div>

src/components/blog/background/Star.astro

···
+---
+import { blog } from "@/config";
+---
+
+<style>
+  img {
+    position: absolute;
+    width: var(--size);
+    height: var(--size);
+    top: calc(var(--y) * 120lvh - 10lvh);
+    left: calc(var(--x) * 120lvw - 10lvw);
+  }
+</style>
+
+{
+  new Array(blog.background.stars.count).fill(0).map((_) => (
+    <img
+      src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.istockphoto.com%2Fphotos%2Fgolden-star-picture-id498723198%3Fk%3D6%26m%3D498723198%26s%3D612x612%26w%3D0%26h%3DrIeSl8WZdo6qWBvw_vgWc3vPhrBj39jCyeiZKltHIWk%3D&f=1&nofb=1&ipt=d84206dedd597d64591aa883e18799f72d5863f495a9ce7b22c0e1814215263b"
+      alt=""
+      style={`--parallax-speed: ${blog.background.parallax.star};
+              --size: ${blog.background.stars.size[0] + Math.random() * (blog.background.stars.size[1] - blog.background.stars.size[0])}rem;
+              --x: ${Math.random()};
+              --y: ${Math.random()}`}
+    />
+  ))
+}

src/config.ts

···
       clouds: 50,
       sun: 10,
       moon: 20,
+      star: 40,
     },
     clouds: {
       count: 8,
       width: [40, 80],
       height: [15, 30],
       yGap: [15, 25],
+    },
+
+    stars: {
+      count: 40,
+      size: [2, 5],
     },
   },
 };