<div *ngIf="isMobileResolution" style="margin-top: -4.25em;">
  <mat-progress-spinner style="border-radius: 50%;" class = "center" color="primary" mode="determinate" value={{timeLeft}} aria-label="Rating">
  </mat-progress-spinner>
  <mat-card-content class = "timer">{{timeRemaining}}</mat-card-content>
  <br>
</div>
<div *ngIf="!isMobileResolution" class="TimerLeft" style="margin-top: -4.25em; margin-right: -11.5em; margin-left: auto">
  <mat-progress-spinner style="border-radius: 50%;" 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-top: -3em;">
  <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()">Tabooh &#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>