@media (max-width: 600px) {
    .lobby-header {
        display: block;
    }

    .lobby-header p, .lobby-header h2 {
        text-align: center;
    }

    .game-lobby {
        width: 100%;
        height: 100%;
        overflow: auto;
        top: 0px;
        position: fixed;
    }

    .lobby-overlay {
        width: 100%;
        height: 100%;
        margin: 0px;
        border: none;
        overflow-y: auto;
        padding-bottom: 100px;
    }
    
    .lobbyheader {
        display: block;
    }

    .main-lobby {
        display: block;
        width: 100%;
        border: none;
        margin: 0px;
        padding-bottom: 100px;
        box-shadow: none;
    }

    .grid-parallel {
        display: block;
    }

    /* #gamelobbyPWsettings, .labelUpdateGameLobbyHidden {
        width: 50%;
    }

    #updateGameLobbyPWSettings, #updateGameLobbyHiddenGameSettingsBtn{
        width: 40%;
    } */

    .containerGameCards {
        height: unset;
        grid-template-areas:
        "currentPlayersGameStatus" 
        "currentGameCard" 
        "GAMEplayedCards"
        "GAMEplayedCards"
        "playerHandCards";

        grid-template-columns: 100%;
        grid-template-rows: unset;
    }

    .abgabeDiv button {
        height: 100px;
    }
/* 
    div.whitecard {
        height: ;
    } */

    .GAMEplayedCards div.card {
        height: 100px;
        max-height: 100px;
    }

    .card {
        height: 100px;
        max-height: 100px;
    }

    .displayTextYourCardMaster {
        font-size: 24px;
    }

    
    div.playerHandCards div.card {
        height: 150px;
        min-height: 150px;
        max-height: 150px;
    }

    .playerHandCards {
       min-height: 170px; 
    }

    .modal-content {
        width: 90%;
    }

    #copyGameJoinLink {
        width: 60%;
        margin-left: 20%;
    }

}

@media (max-height: 600px) {
    .lobby-overlay{
        width: 100%;
        height: 100%;
        margin: 0px;
        border: none;
        overflow-y: auto;
        padding-bottom: 100px;
    }

    .modal-content {
        width: 50%;
    }

    .main-lobby {
        display: block;
        width: 100%;
        margin: 0px;
        border: none;
        box-shadow: none;
    }

    .game-lobby {
        width: 100%;
        height: 100%;
        overflow: auto;
        top: 0px;
        position: fixed;
    }

    
    div.playerHandCards div.card {
        height: 150px;
        min-height: 150px;
        max-height: 150px;
    }

    .containerGameCards {
        height: unset;
        grid-template-areas:
        "currentGameCard GAMEplayedCards" 
        "currentPlayersGameStatus GAMEplayedCards"
        "playerHandCards playerHandCards";
        grid-template-columns: 50%;
    }

    
    #copyGameJoinLink {
        width: 100%;
    }
}