.gameOver{
  position: absolute;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border:1px solid black;
  text-align: center;
}
.passBtn{
  grid-column: 2/5;
}
.dealBtn{
  position: absolute;
  left: 80%;
  top: 30%;
  transform: translate(-50%, -50%);
}
.bidBtn:hover {
  background-color: yellow;
}
.bidBtn:active{
  background-color: orange;
}
.bidBtn{
  display:block;
  text-align: center;
  border:1px solid black;
  cursor: pointer;
}
.handOverBtn {
  position: absolute;
  top:70%;
  left:50%;
  transform:translateX(-50%);
  padding: 15px 25px;
  font-size: 24px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  outline: 2px;
  color: #fff;
  background-color: darkgreen;
  border: 2px solid black;
  border-radius: 15px;
}
.bid{
  text-align: center;
}
.bidLabel{
  text-align: center;
  border-bottom: 1px solid black;
}
.bidding{
  position: absolute;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border:1px solid black;
  text-align: center;
}
.scoreboard{
  position: absolute;
  display:grid;
  grid-template-columns: 1fr 1fr;
  right:5vw;
  border:1px solid black;
}
.scoreboardHeader{
  grid-column: 1 /  span 2;
  font-weight:bold;
  font-size: .7rem;
  border-bottom: 1px solid black;
}
.scoreLabel{
  font-size: .7rem;
  font-weight: bold;
  padding:0;
}
.scoreValue{
  font-size: .7rem;
  border-left: 1px solid black;
  padding:0;
  text-align: center;
}
.gameInfo{
  position: absolute;
  display:grid;
  grid-template-columns: 1fr 1fr;
  top:0;
  left:5vw;
  border:1px solid black;
}
.gameLabel{
  font-weight: bold;
  font-size: .7rem;
}
.gameValue{
  border-left: 1px solid black;
  font-size: .7rem;
  text-align: center;
}
.hidden{
  display:none !important;
}
.bidTable{
  display: block;
}
.bidButtons{
  position:absolute;
  display: inline-block;
  overflow:hidden;
  top:50px;
  margin:40vh 40vw;  /*top right bottom left*/
  transform: translateY(-50%);
  border: 1px solid black;
}
.computerWonBid{
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: larger;
    font-weight: bold;
    color:white;
}
.playerSuitSelection{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: larger;
  font-weight: bold;
  color:white;
}
.discard{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: larger;
  font-weight: bold;
  color:white;
}
.hidden{
  display:none;
}
.player0,.player1, .player2, .player3{
  display: inline-block;
  position: absolute;
  width:100px;
}
.player0{
  right:-70px;
  transform:rotate(90deg);
}
.player1{
  bottom:-40px;
}
.player2{
  left:-70px;
  transform:rotate(90deg);
}
.player3{
  top:0;
}
html{
  background-color: darkgreen;
  overflow: hidden;
}
img{
  max-width: 100%;
}
.p0c0{
  top:calc(50% - 120px);
  z-index: 5;
}
.p0c1{
  top:calc(50% - 100px); 
  z-index: 4;        
}
.p0c2{
  top:calc(50% - 80px);
  z-index: 3;        
}
.p0c3{
  top:calc(50% - 60px);
  z-index: 2;  
}
.p0c4{
  top:calc(50% - 40px);
  z-index: 1;         
}
.p0c5{
  top:calc(50% - 20px);  
  z-index: 0;       
}
.p1c0{
  left:calc(50% - 100px); 
}
.p1c1{
  left:calc(50% - 80px);
}
.p1c2{
  left:calc(50% - 60px);
}
.p1c3{
  left:calc(50% - 40px);   
}
.p1c4{
  left:calc(50% - 20px);
}
.p1c5{
  left:50%;     
}
.p2c0{
  top:calc(50% - 120px);
}
.p2c1{
  top:calc(50% - 100px);
}
.p2c2{
  top:calc(50% - 80px);
}
.p2c3{
  top:calc(50% - 60px);
}
.p2c4{
  top:calc(50% - 40px);
}
.p2c5{
  top:calc(50% - 20px);
}
.p3c0{
  left:calc(50% - 100px);
  z-index: 5;
}
.p3c1{
  left:calc(50% - 80px);
  z-index: 4;
}
.p3c2{
  left:calc(50% - 60px);
  z-index: 3;
}
.p3c3{
  left:calc(50% - 40px);
  z-index: 2;
}
.p3c4{
  left:calc(50% - 20px);
  z-index: 1;
}
.p3c5{
  left:50%;
  z-index: 0;
}
.p1CardUp{
  transform: translateY(-20%);
  transition-duration: 1s;
}
.darkenImage{
  filter:brightness(.3);
}
.gameOverMessage{
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translateX(-50%);
}
.p0Play{
  transform: rotate(90deg) translate(-30px,400px);
  transition-duration: 1s;
}
.p1Play{
  transform: translate(-40px,-160px);
  transition-duration: 1s;
}
.p2Play{
  transform: rotate(90deg) translate(-30px,-400px);
  transition-duration: 1s;
}
.p3Play{
  transform: translate(-40px,160px);
  transition-duration: 1s;
}
@media only screen and (max-width: 400px) {
  .p0Play{
    transform: rotate(90deg) translate(0px,100px);
    transition-duration: 1s;
  }
  .p1Play{
    transform: translate(-40px,-160px);
    transition-duration: 1s;
  }
  .p2Play{
    transform: rotate(90deg) translate(0px,-100px);
    transition-duration: 1s;
  }
  .p3Play{
    transform: translate(-40px,160px);
    transition-duration: 1s;
  }
}
/*precedence inside of GSAP is handled differently than CSS. to get a higher rank I
added !important to make it work even though its defined at the bottom of the stylesheet */
.trick0{
  transform: translateX(2000%) !important;
  transition-duration: 2s;
}
.trick1{
  transform: translateY(2000%) !important;
  transition-duration: 2s;
}
.trick2{
  transform: translateX(-2000%) !important;
  transition-duration: 2s;
}
.trick3{
  transform: translateY(-2000%) !important;
  transition-duration: 2s;
}