Add CSS stars background to website and centre profile text

Author: hk-15

src/Components/AddNavBar/NavBar.scss

@@ -1,15 +1,34 @@
 @import "../../Styles/GlobalStyles.scss";
 
  body {
-    background-color: $blueBackground;
     font-family: $PublicSans;
  }
 
-.navBarContainer {
-    display: flex;
-    background: $blueBackground;
-    justify-content: space-between;
+.stars {
+    position: fixed;
+    z-index: -2;
+    top: 50%;
+    left: 50%;
+    height: 1px;
+    width: 1px;
+    background-color: #fff;
+    border-radius: 50%;
+    box-shadow: 24vw 9vh 1px 0px #fff,12vw -24vh 0px 1px #fff,-45vw -22vh 0px 0px #fff,-37vw -40vh 0px 1px #fff,29vw 19vh 0px 1px #fff,4vw -8vh 0px 1px #fff,-5vw 21vh 1px 1px #fff,-27vw 26vh 1px 1px #fff,-47vw -3vh 1px 1px #fff,-28vw -30vh 0px 1px #fff,-43vw -27vh 0px 1px #fff,4vw 22vh 1px 1px #fff,36vw 23vh 0px 0px #fff,-21vw 24vh 1px 1px #fff,-16vw 2vh 1px 0px #fff,-16vw -6vh 0px 0px #fff,5vw 26vh 0px 0px #fff,-34vw 41vh 0px 0px #fff,1vw 42vh 1px 1px #fff,11vw -13vh 1px 1px #fff,48vw -8vh 1px 0px #fff,22vw -15vh 0px 0px #fff,45vw 49vh 0px 0px #fff,43vw -27vh 1px 1px #fff,20vw -2vh 0px 0px #fff,8vw 22vh 0px 1px #fff,39vw 48vh 1px 1px #fff,-21vw -11vh 0px 1px #fff,-40vw 45vh 0px 1px #fff,11vw -30vh 1px 0px #fff,26vw 30vh 1px 0px #fff,45vw -29vh 0px 1px #fff,-2vw 18vh 0px 0px #fff,-29vw -45vh 1px 0px #fff,-7vw -27vh 1px 1px #fff,42vw 24vh 0px 0px #fff,45vw -48vh 1px 0px #fff,-36vw -18vh 0px 0px #fff,-44vw 13vh 0px 1px #fff,36vw 16vh 0px 1px #fff,40vw 24vh 0px 0px #fff,18vw 11vh 0px 0px #fff,-15vw -23vh 1px 0px #fff,-24vw 48vh 0px 1px #fff,27vw -45vh 1px 0px #fff,-2vw -24vh 0px 1px #fff,-15vw -28vh 0px 0px #fff,-43vw 13vh 1px 0px #fff,7vw 27vh 1px 0px #fff,47vw 5vh 0px 0px #fff,-45vw 15vh 1px 1px #fff,-5vw -28vh 0px 1px #fff,38vw 25vh 1px 1px #fff,-39vw -1vh 1px 0px #fff,5vw 0vh 1px 0px #fff,49vw 13vh 0px 0px #fff,48vw 10vh 0px 1px #fff,19vw -28vh 0px 0px #fff,4vw 7vh 0px 0px #fff,21vw 21vh 1px 1px #fff,-15vw -15vh 0px 1px #fff,-6vw -42vh 1px 0px #fff,-15vw 48vh 1px 1px #fff,-23vw 25vh 1px 1px #fff,-48vw 25vh 0px 1px #fff,-31vw -19vh 0px 1px #fff,4vw 37vh 1px 1px #fff,-43vw 28vh 0px 0px #fff,3vw -25vh 0px 1px #fff,-39vw 14vh 0px 1px #fff,-40vw 31vh 0px 1px #fff,35vw -36vh 1px 1px #fff,16vw 49vh 0px 0px #fff,6vw 39vh 0px 0px #fff,3vw -35vh 0px 1px #fff,-44vw -2vh 1px 0px #fff,-6vw 21vh 1px 0px #fff,48vw 9vh 1px 1px #fff,-43vw 30vh 1px 1px #fff,29vw -12vh 1px 1px #fff,-48vw 13vh 1px 0px #fff,-42vw 32vh 1px 1px #fff,34vw 15vh 1px 1px #fff,29vw -37vh 1px 1px #fff,28vw 2vh 0px 0px #fff;
+    animation: zoom 16s alternate infinite; 
+}
 
+@keyframes zoom {
+    0%{
+        transform: scale(1);
+    }
+    100%{
+        transform: scale(1.5);
+    }
+}
+
+.navBarContainer {
+display: flex;
+justify-content: space-between;
 }
 
 .homeButton  {

src/Components/AddNavBar/NavBar.tsx

@@ -7,26 +7,27 @@ import imageEarth from "./Images/cartoon earth.png";
 export default function NavBar() {
   return (
     <div>
-      <header className="navBarHeader">
-        <nav className="navBarContainer">
-          <div>
-            <Link to="/" className="homeButton" id="homeLink">
-              <img src={imageEarth} alt="imageEarth" id="earthButton" />
-              Home
-            </Link>
-          </div>
-          <div>
-            <Link to="/profile" className="profilePageButton" id="profileLink">
-              <img
-                src={imageAstro}
-                alt="cartoon astronaut illustration"
-                id="astroButton"
-              />
-              Profile
-            </Link>
-          </div>
-        </nav>
-      </header>
+        <header className="navBarHeader">
+          <nav className="navBarContainer">
+            <div>
+              <Link to="/" className="homeButton" id="homeLink">
+                <img src={imageEarth} alt="imageEarth" id="earthButton" />
+                Home
+              </Link>
+            </div>
+            <div>
+              <Link to="/profile" className="profilePageButton" id="profileLink">
+                <img
+                  src={imageAstro}
+                  alt="cartoon astronaut illustration"
+                  id="astroButton"
+                />
+                Profile
+              </Link>
+            </div>
+          </nav>
+        </header>
+      <div className="stars"></div>
     </div>
   );
 }

src/pages/Profile/ProfilePage.scss

@@ -5,6 +5,7 @@ body {
     background-color: $blueBackground;
     color: $whiteFontColor;
     font-family: $PublicSans;
+    text-align: center;
 }