.pegs {
  display: flex;
  align-items: center;
}
.done {
  background-color: rgba(0,0,0,.3) !important;
}
.current {
  background-color: rgba(255,255,0,.3);
}
.peg {
  height: 2em;
  width: 2em;
  border: 2px solid black;
  border-radius: 50%;
  margin: 4px;
  background-color:#bbbbbb;
}
.peg-button {
  box-shadow: 0px 2px black;
}
.peg-button:active {
  box-shadow: none;
  margin-top: 6px;
  margin-bottom: 2px;
}
.button {
  font-size: 1em;
  text-decoration: bold;
  line-height: 2em; /*centering*/
  white-space: nowrap; /*centering*/
  text-align: center; /*centering*/
  border-radius: 1em;
  width: 100px;
  background-color: white;
}
.check {
  display: none;
}
.pegs .red{background-color:#ff5555}
.pegs .orange{background-color:#ff8055}
.pegs .yellow{background-color:#ffff55}
.pegs .green{background-color:#55ff55}
.pegs .blue{background-color:#5555ff}
.pegs .purple{background-color:#af80af}

.stones {
  height: 2em;
  width: 2em;
}
.stone {
  height: 50%;
  width: 50%;
  box-sizing: border-box;
  border: 2px solid black;
  background-color: #bbbbbb;
  border-radius: 50%;
  float: left;
}
.stone .black {
  background-color: black
}
.stone .white {
  background-color: white
}

#settings {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  background-color: rgba(0,0,0,.3);
  width:100%;
  height:100%;
}