.appContainer {
    display: flex;
}

.gameControls {
    flex-shrink: 0;
}
.gameBoard {
    flex-shrink: 0;
    margin: 20px;
    display:flex;
    flex-flow: row wrap;
    justify-content: center;
    width: 400px;
    height: 400px;
    border: 1px solid grey;
}

.gameMoves {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
}

.gameMoves :nth-child(odd) {
    color: blue;
}
.gameMoves :nth-child(even) {
    color: red;
}

.letter {
    flex-basis: auto;
    width: 20%;
    height: 20%;

    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.letter.p0 {
    background-color: rgba(20,20,20,.1);
}

.letter.p1 {
    background-color: rgba(50,50,255,.4);
}
.letter.p1.locked {
    background-color: rgba(50,50,255,.8);
}

.letter.p2 {
    background-color: rgba(255,50,50,.5);
}

.letter.p2.locked {
    background-color: rgba(255,50,50,.8);
}



.word {
    margin: 3px 5px;
}



.github-corner:hover .octo-arm {
  animation: octocat-wave 560ms ease-in-out
}

@keyframes octocat-wave {
  0%,
  100% {
    transform: rotate(0)
  }
  20%,
  60% {
    transform: rotate(-25deg)
  }
  40%,
  80% {
    transform: rotate(10deg)
  }
}

@media (max-width:500px) {
  .github-corner:hover .octo-arm {
    animation: none
  }
  .github-corner .octo-arm {
    animation: octocat-wave 560ms ease-in-out
  }
}