* {
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#container {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 5%;
}

#leftBox {
  width: 100%;
  /* border: 1px solid black; */
  height: auto;
  order: 2;
}

#leftBox ul li {
  list-style: none;
}

#rightBox {
  width: 100%;
  /* border: 1px solid black; */
  height: auto;
  order: 1;
}

.match {
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 30px 0;
}

.teams {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.versus {
  font-size: 40px;
  font-weight: bold;
  margin: 0 30px;;
}

.match .team {
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media only screen and (min-width: 768px) {
  #container {
    flex-direction: row;
  }

  #leftBox {
    order: 1;
  }
  
  #rightBox {
    order: 2;
  }
}