<!DOCTYPE html>
<html>
  <head>
    <title>IndexScore</title>
    <link rel='stylesheet' href='/stylesheets/bootstrap/bootstrap.min.css' />
    <link rel='stylesheet' href='/stylesheets/indexScore.css' />
    <link rel='stylesheet' href='/stylesheets/seven-segment.css' />
  </head>
  <body onload="initialUpdate()">

    <div class="d-flex flex-column align-items-center justify-content-center box-time">
      <div id="durationLeft" class="durationLeft"></div>
    </div>


    <div class="d-flex flex-sm-wrap flex-md-wrap text-center align-items-center justify-content-around box-etc">
      <div class="flex-fill order-xs-1 order-sm-1 order-md-1 order-lg-0">
        <p class="teamName" id="teamA">Team A</p>
      </div>
      <div class="flex-fill order-xs-0 order-sm-0 order-md-0 order-lg-1">
        <div id="score" class="score"></div>
      </div>
      <div class="flex-fill order-xs-2 order-sm-2 order-md-2 order-lg-2">
        <p class="teamName" id="teamB">Team B</p>
      </div>
    </div>

  </body>
  <script src='/javascripts/bootstrap/bootstrap.bundle.min.js'></script>
  <script src="/javascripts/socket.io.min.js"></script>
  <script src="/javascripts/moment.js"></script>
  <script src="/javascripts/indexScore.js"></script>
</html>