<div class="versus">
    <div class="d-flex players">
        <div class="player-one" *ngIf=[playersLoaded] >
            <app-participant-item [participant]="player1data" [small]="true" [shadow]="false" [transparent]="true">
            </app-participant-item>
        </div>
        <div class="player-two" *ngIf=[playersLoaded]>
            <app-participant-item   [participant]="player2data" [small]="true" [shadow]="false" [transparent]="true">

            </app-participant-item>
        </div>
    </div>
    <div class="w-100 d-flex justify-content-center " *ngIf="versusData">
        <div class="task row justify-content-center rounded-5 shadow p-2" >
            <div class="col-12 text-center">
                <h1>{{ versusData.text}}</h1>
            </div>
            <div class="col-12 text-center">
                <div>{{ versusData.description }}</div>
            </div>
        </div>

    </div>
</div>
<audio src="../../../assets/versus/cinematical-epic-loop-190906.mp3" autoplay loop [volume]="0.2"></audio>