:root {
  --10: Navy;
  --9: DarkRed;
  --8: DarkGoldenRod;
  --7: Brown;
  --6: SlateBlue;
  --5: orange;
  --4: yellow;
  --3: blue;
  --2: green;
  --1: red;
  --0: white;
  --default: #cccccc;
  --default-text: #3d405b;
  --primary: #e07a5f;
  --secondary: #81b29a;
  --solid: #000000;
}
body {
  color: var(--default-text);
  margin: 2rem 0;
}
.container {
  width: 40rem;
  margin: 0 auto;
  min-width: 40rem;
}
header {
  text-align: center;
}
.title {
  text-transform: uppercase;
}
#gameplay {
  width: 40rem;
  margin: 0 auto;
}
.gp-header {
  width: 40rem;
  margin: 0 auto;
}
.position {
  border: 1px solid black;
  border-radius: 100vh;
  background-color: var(--0);
  width: 5rem;
  height: 5rem;
  display: inline-block;
  margin: 0.25rem;
}
.play-column {
  background-color: var(--default);
  width: 5rem;
  height: 5rem;
  margin: 0.25rem;
  padding-top: 0.5rem;
  display: inline-block;
  cursor: pointer;
  text-align: center;
  border-radius: 50%;
  transition: background-color 1s;
}
#controls {
  text-align: center;
}
button {
  font-size: 1.5rem;
  padding: 0.5rem 1rem;
}
.alert {
  font-size: 1.5rem;
  color: var(--secondary);
  text-align: center;
  vertical-align: middle;
  line-height: 3rem;
  padding: 0.5rem 2rem;
}
.info-pane {
  margin: 3rem auto;
}
.messages,
.controls {
  width: 45%;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  margin: 0 auto;
}
.color-button {
  height: 1rem;
  width: 1rem;
  margin: 0.5rem 0.25rem;
  display: inline-block;
  border: 1px solid var(--default);
}
.player {
  width: 5rem;
  text-align: center;
  margin: 1rem 0.5rem;
  cursor: pointer;
  display: inline-block;
  border: 1px solid var(--default);
}
.active {
  border: 3px solid var(--default-text);
}