.card {
  padding: 5px;
  border-radius: 8px;
  border: 1px solid #333;
  /* min-height: 150px; */
  cursor: pointer;
  width: 200px;
  height: 200px;
  overflow-y: auto;
}

div.playerHandCards div.card {
  margin: 5px;
  background-color: #2f2f2f;
  border-color: white;
  flex: 0 0 200px;
}

.gameplayerlist h1 {
  position: sticky;
  top: -5px;
  background-color: #222;
  padding: 10px;
  padding-left: 2px;
}

.itsMeClass {
  background-color: #628021;
  border-radius: 8px;
  padding: 3px;
}

.markedCard {
  background-color: #216580 !important;
  border: 1px solid white;
}

.cardmasterdisplay {
  border-radius: 8px;
  padding: 3px;
  background-color: #216580;
}

.whitecardCount {
  /* position: absolute;
  bottom: 5px;
  left: 5px; */
  font-size: 13px;
}

div.whitecard {
    background-color: #216580;
    width: 100%;
    height: 95%;
}
/* 
.cardcontainer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-template-rows: repeat(auto-fill, minmax(250px, 1fr));
    gap: 5px;
    margin: 5px;
    background-color: #221f1d;
    padding: 10px;

}

.gameCardFields {
    display: grid;
    grid-template-rows: 30% 30% 30%;
    gap: 5px;
    margin: 5px;
    padding: 10px;
} */

.containerGameCards {  
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 35% 35% 30%;
    gap: 5px 5px;
    grid-auto-flow: row;
    grid-template-areas:
  "currentGameCard GAMEplayedCards GAMEplayedCards GAMEplayedCards GAMEplayedCards" 
  "currentPlayersGameStatus GAMEplayedCards GAMEplayedCards GAMEplayedCards GAMEplayedCards" 
  "playerHandCards playerHandCards playerHandCards playerHandCards playerHandCards";
    width: 100%;
    height: 90%;
  }
  
.GAMEplayedCards { 
    min-height: 150px;
    grid-area: GAMEplayedCards;
    display: flex;
    padding: 10px;
    background-color: #222;
    border-radius: 8px;
    overflow-x: auto;
}

.GAMEplayedCards * {
    max-height: 50%;
}

.GAMEplayedCards div.card {
  background-color: #2f2f2f;
  border-color: white;
}
  
.currentPlayersGameStatus {
  /* min-height: 100px; */
  grid-area: currentPlayersGameStatus;
  padding: 10px;
  background-color: #222;
  border-radius: 8px;
  overflow: auto;
}

  .currentGameCard { 
    /* min-height: 150px; */
    grid-area: currentGameCard;
    /* display: flex; */
    padding: 10px;
    background-color: #222;
    border-radius: 8px;
    padding-bottom: 25px;
  }
  
  .playerHandCards {
    min-height: 150px;
    align-items: center;
    grid-area: playerHandCards; 
    display: flex;
    padding: 10px;
    background-color: #222;
    border-radius: 8px;
    overflow-x: auto;
}

.abgabeDiv {
  width: 100%;
  align-content: center;
}

.abgabeDiv * {
  text-align: center;
}

.abgabeDiv button {
  margin: 10px;
  width: 200px;
  margin-left: calc(50% - 100px);
}

.multicard {
  margin: 5px;
}

.winnerCard div.card{
  background-color: #36ac00;
}