/* game board table */
body {
  background-color: aliceblue;

}

#board td {
  width: 50px;
  height: 50px;
  border: solid 2px #666;
  border-radius: 5%;
}

/* pieces are div within game table cells: draw as colored circles */

.piece {

  margin: 5px;
  width: 80%;
  height: 80%;
  /*make into circles*/
  border-radius: 50%;

  /* animate */
  /* animation: 1s ease-in;
  animation-direction: normal;
  animation-iteration-count: 1; */
}

/* TODO: make pieces red/blue,  depending on player 1/2 piece */
.p1 {
  background-color: blue;

}

.p2 {
  background-color: red;

}

/* column-top is table row of clickable areas for each column */
/* game board table */
body {
  background-color: aliceblue;

}

#container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
}

#game {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
}

#board td {
  width: 50px;
  height: 50px;
  border: solid 2px #666;
  border-radius: 5%;
  position: relative;
  margin: auto 0;
}

/* pieces are div within game table cells: draw as colored circles */

.piece {

  margin: 5px;
  width: 80%;
  height: 80%;
  /*make into circles*/
  border-radius: 50%;


  /* position: absolute; */

}

/* TODO: make pieces red/blue,  depending on player 1/2 piece */
.p1 {
  background-color: blue;

}

.p2 {
  background-color: red;

}

/* column-top is table row of clickable areas for each column */

#column-top td {
  border: dashed 3px lightblue;
  /* animate
  animation: 1s ease-in;
  animation-direction: normal;
  animation-iteration-count: 1;
  position: relative; */
}

#column-top td:hover {
  background-color: gold;
  border-radius: 5px 20px 5px;
}

#title-text {
  font-family: 'MuseoModerno', cursive;
  font-size: 3rem;
}

#win-txt {
  font-family: 'MuseoModerno', cursive;
  font-size: 1rem;
}

#restart-btn {
  padding: 1.10rem;
  margin: 1rem;
  border-radius: 20px;
  font-size: 1rem;
  font-family: 'MuseoModerno', cursive;
}

.flip-horizontal-bottom {
  -webkit-animation: flip-horizontal-bottom 0.7s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
  animation: flip-horizontal-bottom 0.7s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2020-6-16 9:38:47
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation flip-horizontal-bottom
 * ----------------------------------------
 */
@-webkit-keyframes flip-horizontal-bottom {
  0% {
    -webkit-transform: rotateX(0);
    transform: rotateX(0);
  }

  100% {
    -webkit-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
  }
}

@keyframes flip-horizontal-bottom {
  0% {
    -webkit-transform: rotateX(0);
    transform: rotateX(0);
  }

  100% {
    -webkit-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
  }
}