:root {
  --border: 3px solid white;
  --border2: 3px solid black;
  --blue: #1c3662ff
}

html{
  font-family: 'DM Sans';
  font-weight: 500;
  background-color:  var(--blue);
  color: white;
  margin: auto;
  justify-content: center;
}
body{
  width: 100%;
  margin: 0;
}

.header1{
  width: 100%;
  background-color: white;
  text-align: center;
  span{
    padding: 0 20px;
    background-color: var(--blue);
    font-family: 'Manufacturing Consent';
    font-size: 70px;
  }
  
}


.header2{
  width: 100%;
  background-color: black;
}

.roundSpace{
  
  font-size: 24px;
  line-height: 1;
  width: 920px;
  margin: auto;
  display: flex;
  max-width: 1000%;
  flex-direction: row;
  font-family: 'DM Serif Text';
  align-content: space-between;
  justify-content: space-between;
  text-align: center;
  background-color: black;
}
div.rounds{
  margin: auto;
  width: 100px;
  font-style: italic;
  
}
#final{
  width: 200px;
  font-size: 50px;
  text-align: center;
  align-content: center;
}



.bracket {
  width: 940px;
  margin: auto;
  display: flex;
  overflow: visible;
}

section {
  justify-content: center;
 
  &.quarterFinal{
    padding: 0 18px 0 18px;
     width: 150px;
  }
  &.semiFinal{
    width: 150px;
  }
  &.final{
    padding: 0 30px;
  }
}

ol:not(.final) {
  display: flex;
  flex-flow: wrap;
  align-content: center;
  margin: 0;
  min-height: 100%;
  padding: 0;
}

li:not(.final) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 30px 0;
  position: relative;
  width: 300px;
}

.player{
  font-family: 'DM Sans';
  font-weight: 500;
  z-index: 2;
  border: var(--border2);
  background-color: white;
  color: black;
  
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 24px;
  
  height: 50px;
  width: 150px;
  border-radius: 5px;
  
  padding: 0;
  margin: 2px 0;
}
.r{
  flex-direction: row-reverse;
}

.final{
  display: flex;
  width: 200px;
  flex-flow: row;
  max-height: 100%;
  padding: 0;
  margin: auto 0;
}

.finalist{
  z-index: 2;
  height: 150px;
  margin: 0 2px;
  width: 89px;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  
  background: linear-gradient(white 58%, black 58%);
  border: var(--border2);
  border-radius: 5px;
  
  line-height: 0.8;
  color: white;
  font-family: 'Manufacturing Consent';
  font-size: 30px;
}

.smallText{
  font-family: 'DM Sans';
  font-style: italic;
  margin-top: 8px;
  height: 25px;
  text-align: center;
  align-content: center;
  font-size: 12px;
}

section {
  & li:after, li:before {
    content: "";
    display: block;
    position: absolute;
  }

  & li:not(.r):after {
    right: -13px;
    width: 12px;
    height: 50px;
    border-top: var(--border);
    border-right: var(--border);
    border-bottom: var(--border);
    border-radius: 0 6px 6px 0; 
  }
  & li.r:before {
    left: -13px;
    width: 12px;
    height: 50px;
    border-top: var(--border);
    border-left: var(--border);
    border-bottom: var(--border);
    border-radius: 6px 0 0 6px; 
  }
  
  & li:not(.r):nth-child(1):before {
    right: -63px;
    top: 50px;
    width: 50px;
    height: 50px;
    border-top: var(--border);
    border-right: var(--border);
    
    border-radius: 0 6px 0 0; 
  }
  & li.r:nth-child(1):after {
    left: -63px;
    top:50px;
    width: 50px;
    height: 50px;
    border-top: var(--border);
    border-left: var(--border);
    
    border-radius: 6px 0 0; 
  }
  
  & li:not(.r):nth-child(2):before {
    right: -63px;
    bottom: 50px;
    width: 50px;
    height: 50px;
    border-bottom: var(--border);
    border-right: var(--border);
    
    border-radius: 0 0 6px  0; 
  }
  & li.r:nth-child(2):after {
    left: -63px;
    bottom:50px;
    width: 50px;
    height: 50px;
    border-bottom: var(--border);
    border-left: var(--border);
    
    border-radius: 0 0 0 6px  ; 
  }
}


.player:not(:disabled):hover{
  background: linear-gradient(180deg,#def,#ccf);
  color: var(--blue);
  translate: 2px 1px;
}
.player:disabled{
  background-color: black;
  color: #333;
}

.finalist:hover:not(:disabled){
 
  
  background: linear-gradient(#def 0,#ccf 58%, black 58%);
  color: #888;
  translate: 2px 1px;
}
.finalist:disabled{
  background: linear-gradient(#66a,var(--blue) 58%, black 58%);
}
.finalist:disabled{
  background: linear-gradient(#66a,var(--blue) 58%, black 58%);
}



.header3{
  background-color: black;
  font-family: 'DM Serif Text';
  text-align: center;
  font-size: 30px;
}

.groupStage{
  background-color: white;
  padding-bottom: 100px;
}
.groups{
  justify-content: center;
  margin: auto;
  display: flex;
  flex-direction: row;
}


table{
  color: black;
  background-color: white;
  margin:10px;
  border: var(--border2);
  border-collapse: collapse;
}
th,td,tr{
  border-collapse: collapse;
  border: none;
  margin: 0;
  padding: 0 4px;
  
}
td{
  font-size: 23px;
}
.num{
  text-align: center;
  font-family:"helvetica neue";
  font-size: 29px;
  font-weight:500;
  width: 29px;
  margin: 2px;
  border: 0;
}

th{
  width: 100px;
  font-weight: normal;
}
th:nth-child(even){
  width: 30px
}

tr:nth-child(1){
  height: 20px;
  background-color: black;
  th:nth-child(2){
    font-size: 35px;
    width: 30px;
    font-family: 'manufacturing consent';
    
    text-align: center;
    &#A{ color: #ea4335;}
    &#B{ color: #fbbc04;}
    &#C{ color: #34a853;}
    &#D{ color: #2763cc;}
  }
  th:nth-child(1){
    height: 45px;
    text-align: end;
    font-size: 24px;
    font-weight: 250;
    
    color: white;

    margin: 0;
  }
}
tr:nth-child(2){
  background-color: var(--blue);
  color: white;
  font-size: 15px;
  text-align: left;
  border-bottom: 2px solid var(--blue);
  border-top: -33px solid var(--blue);
  th:nth-child(1){
    text-align: end;
    border-right: solid white 1px;
  }
}

.congrats{
  
  margin: auto;
  background-color: white;
  vertical-align: middle;
  align-content: center;
  
}
#winner{
  display: flex;
  margin: 6px auto;
  flex-direction: column;
  border: var(--border2);
  border-radius: 25px;
  width: 200px;
  align-items: center;
  color: black;
  background: linear-gradient(-20deg,#ffb833 20%, #faefbb 53%,#cfa033 58%, #faefbb 70%, #daa635 71%,#bf8803 86%);
  font-family: 'manufacturing consent';
  font-size: 55px;
}