Angular Snackbar not displaying as fixed

i am trying to use MatSnackbar. The Problem is it doesn't appear fixed on my Screen. It appears below my last div. I want it to be displayed in the same position on my screen every time. So it can always be read, no matter where it gets triggered.

I have a Fullscreen Page Calling the Snackbar with the button extends the page

HTML component

<div class="page-wrapper">
    <span>Yes</span>
    <br>
    <br>
    <button  (click)="snackbar()">SNACKBAR</button>
</div>

CSS component

.page-wrapper {
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #36454F;
}

span {
    font-size: 3rem;
    font-weight: 600;
    height: 100px;
}

TS component

import { Component } from '@angular/core';
import { SnackbarService } from '../shared/snackbar.service';

@Component({
  selector: 'app-main-page',
  standalone: true,
  imports: [],
  templateUrl: './main-page.component.html',
  styleUrl: './main-page.component.scss'
})
export class MainPageComponent {

  constructor(
    private snackBarService: SnackbarService) { }

  snackbar() {
   
      this.snackBarService.showMailMSG();

  }
}

Snackbar.service.ts

import { Injectable, NgZone } from '@angular/core';
import { MatSnackBarModule, MatSnackBar} from '@angular/material/snack-bar';

@Injectable({
  providedIn: 'root'
})
export class SnackbarService {

  constructor(private _snackBar: MatSnackBar) { }

  showMessage(message: string, action: string = 'Close', duration: number) {
      this._snackBar.open(message, action, {
          duration,
          panelClass: ['my-awesome-snackbar']
      });
  }

  showMailMSG() {
      this.showMessage('Nicht implementiert', 'Schließen', 3000);
  }
}

Panelclass

.my-awesome-snackbar {
    --mdc-snackbar-container-color: #26c6da;
    --mat-mdc-snack-bar-button-color: #fff;
    --mdc-snackbar-supporting-text-color: #fff;
    height: 10%;
    width: 100%;
   
}

I tried Angular Material Snackbar not shown correctly

I also tried giving it margin, position: fixed, height, etc. in styles.css in my Panelclass

For anyone encountering this problem.

My Angular materials were displaying incorrectly since i didn't include:

@include mat.core();

in my styles.scss