.navbar{
    /*background-color: #2C3D50;*/
 }

 .nav li {
  /*font-weight: bold;*/
  /*color: #ffffff;*/
 }

/* Rock Paper Scissors */

body {
  background-color: #fff;
}

.hidden {
  display: none;
}

#wrapper {
  margin-top: 10%;
  display: grid;
  grid-template-columns: 1fr 2fr 2fr 2fr 1fr;
  justify-items: center;
  align-self: center;
}

h1 {
  grid-column: 2/5;
  grid-row: 1/2;
  font-size: 3em;
}

@media (max-width: 570px) {
  h1 {
    font-size: 2.5em;
  }
}

@media (max-width: 478px) {
  h1 {
    font-size: 2.2em;
  }
}

#display {
  grid-column: 2/5;
  grid-row: 2/3;
}

@media (max-width: 447px) {
  #display {
    font-size: 1.4em;
  }
}

.play-game {
  cursor: pointer;
  grid-row: 3/4;
}

#rock {
  grid-column: 2/3;
}

#paper {
  grid-column: 3/4;
}

#scissors {
  grid-column: 4/5;
}

#reset {
  grid-column: 2/5;
  grid-row: 3/4;
  justify-self: stretch;
  font-size: 4em;
}

#scoreboard {
  grid-column: 2/5;
  grid-row: 4/5;
  justify-self: stretch;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr 2fr 1fr;
  justify-items: center;
}

#player {
  grid-column: 2/3;
  grid-row: 1/2;
}

#player-score {
  grid-column: 2/3;
}

#computer {
  grid-column: 4/5;
  grid-row: 1/2;
}

#computer-score {
  grid-column: 4/5;
}

.scores {
  grid-row: 2/3;
  align-self: start;
  font-size: 3em;
}