body {
    background-color: rgb(202, 199, 199);
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    margin: 0;
  }
  section {
    margin: 0 8px;
  }

  .clear {
    float: right;
  }

  footer {
    text-align: center;
  }

  .loader {
    border: 6px solid #f3f3f3; 
    border-top: 6px solid #3498db; 
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }


  .points1, .bonus1, .points2, .bonus2, .points3, .bonus3, .points4, .bonus4, .points5, .bonus5, .points6, .bonus6 {
      width: 30px;
      height: 10px;
      margin-bottom: 10px;
      margin-right: 25px;
  } 

  .points, .points1, .bonus1, .points2, .bonus2, .points3, .bonus3, .points4, .bonus4, .points5, .bonus5, .points6, .bonus6 {
padding-left: 5px;
}

 

  .numberOfPartcipants, .winner1, .winner2, .winner3, .fee {
    width: 60px;
    margin-right: 18px;
    position: relative;
  }

 .percent1, .percent2, .percent3, .entry, .participantsSpan {
    display: inline-block;
  }


.top {
  display:flex;
  justify-content: space-around;
}

.decimal {
  text-align: center;
  background: rgb(189, 187, 187);
}

.entry, .participantsSpan {
  font-weight: bold;
  font-size: 18px;
}
 

  .team, .team2, .team3, .team4, .team5, .team6 {
      font-size: 8px;
      cursor: pointer;
      font-weight: bold;
  }

  .seed, .seed2, .seed3, .seed4, .seed5, .seed6 {
      font-size: 9px;
      cursor: pointer;
      font-weight: bold;
  }
  
  .header-text {
      color: white;
      background: linear-gradient(#23e6cc, #255dd4);
      border: double 5px white;
      border-radius: 1em;
      text-align: center;
      box-shadow: 3px 3px 3px 1.5px grey;
      padding: 5px 0;
  }
  .header-text h1, .header-text h6 {
      margin: 0;
  }
  .header-text h1 {
      font-size: 1.5em;
  }
  
.points {
    color: black;
    font-size: 8px;
    text-align: left;
}
  
  .tournament {
      display: flex;
      flex-direction: row;
  }
  .tournament .round {
    font-size: .75em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 200px;
    list-style: none;
    padding: 0;
  }
  .tournament .round .spacer {
    flex-grow: 2;
  }
  .tournament .round .spacer:first-child,
  .tournament .round .spacer:last-child {
    flex-grow: 1;
  }
  
  .first-four {
    border: 1px solid #888;
    border-radius: 1em;
    background-color: lightcyan;
    padding: 0 1em;
  }
  .tournament-header {
    text-align: center;
    font-weight: bold;
    border-radius: 1em;
    border: 1px solid black;
    background-color: #45f500;
    box-shadow: 3px 3px 3px 1.5px grey;
    color: black;
    width: 100%;
  }
  
  
  .region {
      font-size: 1.5em;
      font-weight:bold;
  }
  .region-right {
      text-align:right;
    padding-right: 5px;
  }
  .region-left {
      text-align:left;
    padding-left: 5px;
  }
  
  ul.rank li.game-left span:first-child,
  ul.rank li.game-right span:last-child {
      font-size: 0.5em;
  }
  
  li.game-right {
    text-align: right;
    border-left: 1px solid black;
  }
  li.game-left {
      border-right: 1px solid black;
  }
  li.game-bottom {
    border-bottom: 1px solid black;
  }
  li.game-top {
    border: none;
    border-bottom: 1px solid black;
  }


  li.game-left.spacer {
      border-right: 1px solid black;
      min-height: 5px;
      padding-right:.25em;
  }
  li.game-right.spacer {
      border-left: 1px solid black;
      min-height: 5px;
      padding-left:.25em;
      text-align: left;
  }
  
  .final {
      text-align: center;
      padding-top: 1em;
      padding-bottom: 1em;
      border: 1px solid black;
      margin-top: 1em;
      margin-bottom: 1em;
      font-weight:bold;
  }
  .finals .centered {
      text-align:center;
      font-weight:bold;
  }
  .finals .centered > input {
      display:block;
      width:4em;
      margin: 0 auto 0 auto;
      text-align:center;
  }
  
  .body-first-child {
    margin-top: -45px;
  }
  .extra-padding {
    padding-top: 45px;
  }

  .right {
    margin-top: -50px;
  }

  @media screen and (max-width: 580px) {
    .tournament-header{
      width: 100%;
    }
    .roundTitle {
      font-size: 7px;
    }

    .percent1, .percent2, .percent3, .entry, .participantsSpan {
      font-size: 10px;
    }
    input::placeholder {
      font-size: 10px;
    }
    .numberOfPartcipants, .fee {
      width: 38px;
  }
}

  @media screen and (max-width: 400px) {
  .submitBracket, .clear {
    font-size: 7px;
  }

    .percent1, .percent2, .percent3, .entry, .participantsSpan {
      font-size: 8px;
    
  }

  input::placeholder {
    font-size: 8px;
  }

  .roundTitle {
    font-size: 5px;
  }

  .points {
    font-size: 7px;
  }

  .points1, .bonus1, .points2, .bonus2, .points3, .bonus3, .points4, .bonus4, .points5, .bonus5, .points6, .bonus6 {
    width: 25px;
    height: 10px;
    margin-bottom: 10px;
    margin-right: 8px;

  }
  .points, .points1, .bonus1, .points2, .bonus2, .points3, .bonus3, .points4, .bonus4, .points5, .bonus5, .points6, .bonus6 {
    padding-left: .5px;
    }
}

  .entering {
    display: flex;
    justify-content: space-around;
    background: rgb(189, 187, 187)
  }

  .roundTitle {
    margin-right:10px;
  }