* {
  box-sizing: border-box;
  --universalSize: 100px;
  font-family: "Courier New", Courier, monospace;
}
/* source for animation: https://codepen.io/ericwshea/pen/EyzZQg */
@keyframes expand {
  from {
    transform: scale(0);
    opacity: 0;
  }
}
h1 {
  text-align: center;
  text-shadow: 2px 2px lightgrey;
}
.gameContainer {
  display: flex;
  flex-direction: row;
  margin: 0 auto;
  width: calc(var(--universalSize) * 7);
  border-radius: 25px;
  overflow: hidden;
}
.column {
  background-image: url(/IMG/connectFour/ConnectFourColumn.png);
  display: flex;
  flex-direction: column-reverse;
  width: var(--universalSize);
  height: calc(var(--universalSize) * 6);
  border-left: 1px solid navy;
}
.column#column0 {
  border-left: none;
}
.gamepiece {
  width: var(--universalSize);
  height: var(--universalSize);
  clip-path: circle(40%);
  animation: expand 0.3s ease-in-out;
}
.gamepiece.player1 {
  background-color: black;
}
.gamepiece.player2 {
  background-color: pink;
}
.playerIndicatorContainer {
  width: calc(var(--universalSize) * 3);
  position: fixed;
  top: 5px;
  right: 5px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}
.playerIndicatorContainer h2 {
  text-align: center;
}
.indicator {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
}

.indicator .player1 {
  display: flex;
  justify-content: center;
  align-items: center;
  color: antiquewhite;
  width: 100px;
  transition: display 0.9s;
}

.indicator .player2 {
  display: none;
  justify-content: center;
  align-items: center;
  width: 100px;
  transition: display 0.9s;
}
.scoreTally {
  position: fixed;
  top: 5px;
  left: 5px;
}
.playerScoreBox {
  display: flex;
  align-items: center;
}
.playerScoreBox .player1 {
  display: flex;
  justify-content: center;
  align-items: center;
  color: antiquewhite;
  width: 100px;
}
.playerScoreBox .player2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
}
.objective {
  width: calc(var(--universalSize) * 7);
  margin: 0 auto;
}
h4 {
  margin-bottom: 0;
}
.modalContainer {
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 110vh;
  background-color: rgba(0, 0, 0, 0.7);
}
.modal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 80vw;
  height: 60vh;

  animation: expand 0.5s ease-in-out;
}
.modalMessage {
  color: antiquewhite;
  font-size: 95px;
}
#reset,
#rematch {
  font-size: 24px;
}

footer {
  position: fixed;
  bottom: 5px;
  right: 5px;
  color: rgba(0, 0, 0, 0.3);
}

a.returnHome {
  text-decoration: none;
  justify-content: center;
  align-items: center;
  display: flex;
  color: initial;
  border: 1px solid gray;
  border-radius: 5px;
  width: 150px;
  position: fixed;
  bottom: 10px;
  left: 10px;
}

a.returnHome:hover {
  border: 3px solid darkgray;
  transition: border 0.2s;
}