<div class="TimerLeft" style="margin-top: 10px; margin-right: 48px; margin-left: auto">
  <mat-progress-spinner class = "white" color="primary" mode="determinate" value={{timeLeft}} aria-label="Rating">

  </mat-progress-spinner>
  <mat-card-content class = "timer">{{timeRemaining}}</mat-card-content>
</div>
<div style="text-align: center; margin-left: 15em; margin-right: 15em; margin-top: 2em;">

  <mat-card>
    <mat-card-title>
      {{cardInfo.solution}}
    </mat-card-title>
  </mat-card>

  <br>
  <mat-card>
    <h2>
      {{cardInfo.tabu1}}
    </h2>
  </mat-card>
  <mat-card>
    <h2>
      {{cardInfo.tabu2}}
    </h2>
  </mat-card>
  <mat-card>
    <h2>
      {{cardInfo.tabu3}}
    </h2>
  </mat-card>
  <mat-card>
    <h2>
      {{cardInfo.tabu4}}
    </h2>
  </mat-card>
  <mat-card>
    <h2>
      {{cardInfo.tabu5}}
    </h2>
  </mat-card>
  <br>
  <button *ngIf="isExplainer" mat-raised-button color="primary" (click)="rightAnswer()">Richtig &#10004;</button>
  <button *ngIf="isExplainer" mat-raised-button color="accent" style="margin: 40px" (click)="newCard()">Überspringen &#187;</button>
  <button mat-raised-button color="warn" (click)="wrongAnswer()">Tabu &#10008;</button>
  <br>
  <br>
  <mat-card class="transparent">
    <mat-card-title>Spielstand</mat-card-title>
    <mat-card-content>
      <table>
        <tr>
          <th>Team rot</th>
          <th>Team blau</th>
        </tr>
        <tr>
          <th class = "red">{{gameStatus.red}}</th>
          <th class = "blue">{{gameStatus.blue}}</th>
        </tr>
      </table>
    </mat-card-content>
  </mat-card>
</div>