<div style="text-align: center; margin-left: 15em; margin-right: 15em; margin-top: 5em;">
  <mat-card class="transparent">
    <div class="FloatLeftAndCenterElement">
      <div class="newStartButtonLeft">
        <button matTooltip="Neues Spiel starten" [disabled]="buttonNewGameDisabled || gameStatus.activeExplainer == 1" mat-raised-button color="primary" (click)="startGame()">
          <mat-icon color = "white" aria-hidden="false">autorenew</mat-icon></button>
      </div>
      <div class="CenterText">
        <h2>{{membership}}</h2>
      </div>
    </div>
    <button mat-raised-button class = "{{red}}" (click)="joinTeam('red')">
      <mat-icon color = "warn" aria-hidden="false" aria-label="home icon red">home</mat-icon>
    </button>
    <button mat-raised-button class = "{{blue}}" (click)="joinTeam('blue')">
      <mat-icon style="color: darkblue" aria-hidden="false" aria-label="home icon blue">home</mat-icon>
    </button>
  </mat-card>
  <br>
  <br>
  <br>
  <mat-card class="transparent">
    <mat-card-title>Spielstand</mat-card-title>
    <mat-card-content>
      <br>
      <table>
        <tr>
          <th>Team rot</th>
          <th>Team blau</th>
        </tr>
        <tr>
          <th class = "redfont">{{gameStatus.red}}</th>
          <th class = "bluefont">{{gameStatus.blue}}</th>
        </tr>
      </table>
    </mat-card-content>
    <mat-card-actions>
      <br>
      <br>
      <div *ngIf="isActiveRound" class="spinner-wrapper">
        <mat-card-title class="rightPlace">Warten auf nächste Runde</mat-card-title>
        <mat-spinner diameter="30"></mat-spinner>
      </div>
      <mat-card-title *ngIf="!isActiveRound">{{nextTeam}} ist am Zug:</mat-card-title>
      <br>
      <button [disabled]="buttonNextRoundDisabled || gameStatus.activeExplainer == 1" mat-raised-button color="primary" (click)="nextRound()">Ich erkläre und los!</button>
    </mat-card-actions>
  </mat-card>
</div>