#code_entry {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#code_entry > h1 {
  text-align: center;
}

#code_entry > form > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#valid_wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#valid {
  text-align: center;
}

#viewer {
  text-align: center;
}

#hand0, #hand2 {
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}

#hand1, #hand3 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-flow: column wrap;
}

#big_container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#big_container > div {
  width: 100%;
}

.display_center {
  display: flex;
  flex-direction: column;
}

.tricks_won {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav_bar_top {
  display: flex;
  flex-direction: row;
  padding: 0px;
}

.nav_bar_bot {
  display: flex;
  flex-direction: row;
  padding: 0px;
}

.history {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-self: center;
}

html {
  padding-left: 20px;
  padding-bottom: 50px;
}

.replay {
  display: none;
}

@media (min-width: 576px) {
  #stack {
    height: 297px;
  }
  .nav_bar_top {
    justify-content: flex-end;
  }
  .nav_bar_bot {
    justify-content: flex-start;
  }
}

@media (max-width: 575px) {
  #stack {
    height: 297px;
  }
  .nav_bar_top, .nav_bar_bot {
    justify-content: center;
  }
  .tricks_won {
    display: none;
  }
}

@media (max-width: 992px) {
  #hand0, #hand2 {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
  }
  #hand1, #hand3 {
    height: 100px;
    flex-direction: row;
  }
}