body {
  background-color: black;
}

h1 {
  color: white;
  /*margin: 0 auto;*/
  text-align: center;
  z-index: 2;
}

#game-container {
  /*border: 2px white solid;*/
  text-align: center;
  /*display: flex;*/
}

#left-panel, #right-panel {
  width: 300px;
  height: 500px;
  background-color: white;
  display: inline-block;
  text-align: center;
  margin: 0;
  border: 1px black solid;
  /*display: flex;
  flex-direction: row;*/
  animation-delay: 0;
}

#prog-bar {
  display: inline-block;
  width: 20px;
  height: 500px;
  background-color: blue;
  vertical-align: bottom;
  padding: 0;
  margin: 0;
}

.prog-bit {
  width: 20px;
  height: 1px;
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap-reverse;
  background-color: black;
  /*vertical-align: bottom;*/
  padding: 0;
  margin: 0;
}

#score-box {
  color: white;
  max-width: 48%;
  height: 50px;
  border: 1px white solid; margin: 0 auto;
  z-index: 10;
}

#current-score-box, #high-score-box {
  color: white;
  width: 50%;
  height: 100%;
  border: 1px white solid;
  margin: 0 auto;
  display: flex;
  box-sizing: border-box;
  z-index: 10;
  font-size: 24px;
}

#current-score-box {
  float: left;
}

#high-score-box {
  float: right;
}

#climber-1, #climber-2 {
  width: 20px;
  height: 20px;
  display: inline-block;
  background-color: red;
  position: relative;
  /*z-index: 999;*/
}

.hazard {
  height: 20px;
  width: 20px;
  background-color: black;
  display: inline-block;
  position: absolute;
  animation-name: falling-hazard;
  transition-timing-function: linear;
  animation-iteration-count: infinite;
  z-index: 1;
}

@keyframes falling-hazard {
  from {
    top: 0px;
    animation-timing-function: linear;
  }
  to {
    top: 800px;
    animation-timing-function: linear;
  }
}