/* game board table */
:root {
  --red: #E3371E;
  --lightred: #e55b45;
  --orange: #FF7A48;
  --blue: #103778;
  --lightblue: #4674c4;
  --deepblue: #151F30;
}

/* drop down piece animation */
@keyframes drop-piece {
  from {
    transform: translateY(-700%)
  }
}

html {
  max-width: 100vw !important;
  max-height: 100vh !important;
}

body {
  height: 100vh !important;
  width: 100vw !important;
  margin: 0;
  display: flex;
  flex-direction: column;

  align-items: center;
  background-color: var(--deepblue);
  overflow: hidden;
}


.gameHeader {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 400px;
  height: 200px;
  z-index: 10;
}

h1 {
  text-align: center;
  position: absolute;
  color: antiquewhite;
  font-size: 10rem;
  top: -87px;
  /* background-color: #103778; */
}

h2 {
  font-family: 'Lobster', cursive;
  font-weight: 100;
  background: -webkit-linear-gradient(var(--red), var(--lightred));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 7rem;
  z-index: 1;
}



.startgame {
  position: absolute;
  top: 35vh;
  color: antiquewhite;
  display: flex;
  justify-content: center;
  font-family: 'Lobster', cursive;
  font-size: 4rem;
  z-index: 3;
  background: linear-gradient(90deg, var(--blue), var(--lightblue));
  height: 100px;
  width: 400px;
  border: none;
  border-radius: 100px;
}

.startgame:hover {
  position: absolute;
  top: 35vh;
  color: antiquewhite;
  display: flex;
  justify-content: center;
  font-family: 'Lobster', cursive;
  font-size: 4rem;
  z-index: 3;
  background: linear-gradient(90deg, var(--red), var(--lightred));
  height: 100px;
  width: 400px;
  border: none;
  border-radius: 100px;
}



.playerStatus {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 80px
}

.currPlayer#playerOne {
  font-family: 'Lobster', cursive;
  font-size: 2rem;
  display: flex;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 50px;
  position: relative;
  color: var(--lightred);
  justify-content: center;
  right: 150px;
  top: -40px;
  justify-content: center;
  transition: all 1s;
}

.currPlayer#playerTwo {
  font-family: 'Lobster', cursive;
  font-size: 2rem;
  display: flex;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 50px;
  position: relative;
  color: var(--lightblue);
  justify-content: center;
  top: -40px;
  left: 150px;
  justify-content: center;
  transition: all 1s;
}


.gameContainer {
  position: absolute;
  height: 100vh;
  width: 100vw;
  top: 0px;
  left: 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

/* transform board */
#game {
  width: 400px;
  height: 400px;
  transform: rotate(-45deg) scale(3.25) translateX(0px) translateY(-12vw);
  border-radius: 30px;
  display: flex;
  background: antiquewhite;
  box-shadow: 10px 10px 10px rgb(15, 14, 45);
  pointer-events: none;
  z-index: 2;
}

#gameStarted {
  position: relative;
  top: 50px;
  padding: 1vh;
  border-radius: 30px;
  align-items: center;
  background: antiquewhite;
  box-shadow: 10px 10px 20px rgb(15, 14, 45);
  transition: all 1s ease-out;
}

[id*="column-top"]>td {
  width: 50px;
  height: 50px;
  padding: none;
  margin: none;
  border-radius: 50%;
  margin: 50px;
  background-color: antiquewhite;
  -webkit-box-shadow: none;
}



#board .mainboard {
  width: 50px;
  height: 50px;
  padding: none;
  margin: none;
  border-radius: 50%;
  margin: 50px;

}

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

.piece {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: drop-piece 400ms;
}

.piece.p1 {
  border: none;
  background: linear-gradient(90deg, var(--red), var(--lightred));

}

.piece.p2 {
  border: none;
  background: linear-gradient(90deg, var(--blue), var(--lightblue));

}

td {
  margin: 20px;
  background-color: #151F30;
  -webkit-box-shadow: inset 10px 10px 10px rgb(15, 14, 45);
}

/* change all td's to gameover class so that they cannot be clicked */
[class*="gameover"] {
  pointer-events: none;
}

/* remove background color when piece is placed */
td.placed {
  background: none;
  -webkit-box-shadow: none;

}

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

#column-top.p1 td:hover {
  background-color: var(--orange);
}

#board>#column-top.p1>.hovered {
  background-color: var(--orange);
}

#column-top td:hover {
  background-color: var(--lightblue);
}

#board>#column-top>.hovered {
  background-color: var(--lightblue);
}

/* hide 'new game' button when game starts */
.hidden {
  transform: translateY(-900px);
  transition: opacity .5s, transform;
  transition-delay: 0s, 1s;
  opacity: 0;
  display: none;
}

.winnerNotificaiton {
  justify-content: center;
  align-content: center;
  position: absolute;
  color: antiquewhite;
  display: flex;
  justify-content: center;
  font-family: 'Lobster', cursive;
  font-size: 4rem;
  background: linear-gradient(90deg, var(--red), var(--lightred));
  box-shadow: 5px 5px 20px #15253d42;
  height: 100px;
  width: 400px;
  border: none;
  border-radius: 100px;
}

.winnerNotificaiton2 {
  justify-content: center;
  align-content: center;
  position: absolute;
  color: antiquewhite;
  display: flex;
  justify-content: center;
  font-family: 'Lobster', cursive;
  font-size: 4rem;
  background: linear-gradient(90deg, var(--blue), var(--lightblue));
  box-shadow: 5px 5px 20px #15253d42;
  height: 100px;
  width: 400px;
  border: none;
  border-radius: 100px;
}

@media screen and (max-width: 650px) {

  .appContainer {
    max-height: 100vh !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }

  .gameContainer {
    top: 50px;
    scale: .8;
  }

  #gameStarted {
    top: -20px;
  }

  .currPlayer {
    scale: 1.7;
  }

  .currPlayer#playerOne {
    top: -170px;
    right: 0px;
  }

  .currPlayer#playerTwo {
    top: -170px;
    left: 0px;
  }

  .startgame {
    scale: .8;
  }
}