fix: fixed the background image on backgroundExtended

src/app/components/about-me/about-me.component.scss

@@ -23,7 +23,7 @@
     background-color: rgba(0, 0, 0, 0.43);
     border-radius: 12px;
     color: rgb(255, 255, 255);
-    font-size: 25px;
+    font-size: 30px;
 
     p {
       margin: 0;
@@ -53,6 +53,7 @@
       height: 50% !important;
       width: 90%;
       margin-bottom: 5%;
+      font-size: 20;
     }
   }
 }
@@ -72,6 +73,7 @@
       height: 40% !important;
       width: 80%;
       margin-bottom: 5%;
+      font-size: 25;
     }
   }
 }

src/app/components/global/background/background.component.html

@@ -7,4 +7,4 @@
   </div>
 } @else {
   <img src="assets/plain-smooth-green-wall-texture.webp" alt="Background image" class="background-image">
-}
+}
\ No newline at end of file

src/app/components/global/background/background.component.scss

 #circleContainer {
   width: 100%;
-  min-height: 100%;
+  height: 100%;
   background-color: #000000;
   font-family: Helvetica, serif;
   z-index: 0;
@@ -10,7 +10,7 @@
 
 .background-image {
   width: 100%;
-  min-height: 100%!important;
+  height: 100%;
   object-fit: cover;
   position: absolute;
   top: 0;

src/app/components/global/background/background.component.ts

@@ -29,8 +29,10 @@ export class BackgroundComponent {
   constructor(private renderer: Renderer2, private elRef: ElementRef) {}
 
   ngOnInit(): void {
-    this.howManyCircles.length = this.numDivs;
-    this.startAnimationLoop();
+    if(window.innerWidth > 500){
+      this.howManyCircles.length = this.numDivs;
+      this.startAnimationLoop();
+    }
   }
 
   startAnimationLoop(): void {

src/app/components/global/footer/footer.component.scss

@@ -6,7 +6,7 @@ div{
     display: flex;
     justify-content: space-around;
     align-items: center;
-    z-index: 100;
+    z-index: 1;
     position: relative;
 
     p:hover{

src/styles.scss

@@ -8,6 +8,8 @@ html {
     margin: 0;
     padding: 0;
     position: relative;
+    display: flex;
+    align-content: space-between;
     height: 100vh;
 
     .wholeScreen {
@@ -15,7 +17,7 @@ html {
       height: 100vh!important;
       font-family: Helvetica, serif;
       position: relative;
-      z-index: 1;
+      z-index: 1!important;
 
       .restOfScreen {
         height: 90%;