working on about me and contact site for handy mode

src/app/app.component.html

-<router-outlet>
-  <app-background class="background"></app-background>
-</router-outlet>
+<router-outlet></router-outlet>

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

+<app-background class="backgroundExtended"></app-background>
+
 <div class="wholeScreen">
     <app-header></app-header>
     <div class="restOfScreen">
@@ -9,4 +11,4 @@
         </div>
     </div>
 </div>
-<app-footer></app-footer>
+<app-footer class="backgroundExtended"></app-footer>

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/contact/contact.component.html

+<app-background class="backgroundExtended"></app-background>
+
 <div class="wholeScreen">
   <app-header></app-header>
   <div class="restOfScreen">
@@ -48,4 +50,4 @@
     </div>
   </div>
 </div>
-<app-footer></app-footer>
+<app-footer class="backgroundExtended"></app-footer>

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

@@ -33,4 +33,4 @@
     width: 100px;
     height: 100px;
   }
-}
+}
\ No newline at end of file

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/app/components/home/home.component.html

+<app-background class="background"></app-background>
+
 <div class="wholeScreen">
     <app-header></app-header>
     <div class="restOfScreen">

src/app/components/impressum/impressum.component.html

+<app-background class="background"></app-background>
+
 <div class="wholeScreen">
   <app-header></app-header>
   <div class="restOfScreen">

src/app/components/page-not-found/page-not-found.component.html

+<app-background class="background"></app-background>
+
 <div class="wholeScreen">
     <app-header></app-header>
 

src/app/components/projects/projects.component.html

+<app-background class="background"></app-background>
+
 <div class="wholeScreen">
   <app-header></app-header>
   <div class="restOfScreen">

src/app/components/skills/skills.component.html

+<app-background class="background"></app-background>
+
 <div class="wholeScreen">
   <app-header></app-header>
   <div class="restOfScreen">

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%;