<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>

    main{
        display:flex;
        display: inline-block;
        padding: 1%;
    }

/*
 *  General Styles
*/
body{
  font-family:sans-serif;
}


    td,
    th {
      border: 1px solid rgb(190, 190, 190);
      padding: 10px;
      text-align: left;
      height: 4rem;
      overflow: hidden;
    }

    td {
      text-align: center;
    }
    
    td[scope='hide'] {
        background-color: #a9a9a9;
        text-align: left;
    }

    tr {
      background-color: #fff;
      text-align: left;
    }

    th[scope='col'] {
      background-color: #d7d9f2;
      text-align: left;
    }

    th[scope='row'] {
      background-color: #d7d9f2;
      text-align: left;
    }

    caption {
      padding: 10px;
      caption-side: bottom;
    }

    table {
      border-collapse: collapse;
      border: 2px solid rgb(200, 200, 200);
      letter-spacing: 1px;
      table-layout: fixed;
      width: 100%;
    }

.score {
    text-align: center;
}

    .player {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
</head>
<body>

<main id="tournament">
    <table>
      <caption>
        <h2>{{bracketTitle}}</h2>
        <h3>{{bracketStartDate}}</h3>
      </caption>
      <tr>
        <th scope="col" style="visibility:hidden"></th>
        {{teamsCol}}
      </tr>
      {{teamsRow}}
    </table>
    
</main>
</body>
</html>
