#gameScreen{
    background-image: url(Images/DUTCHBoard.png);
    background-size: cover;
    width:1500px;
    height: 900px;
    display: grid;
    grid-template-areas: 
    "PlayerLeft PlayerUp PlayerRight"
    "PlayerLeft CenterDeck PlayerRight"
    "PlayerLeft PlayerDown PlayerRight";
    grid-template-columns: 290px 870px 290px;
    grid-template-rows: 362px 200px 362px;
    row-gap: 50px;
}
#gameScreen>div{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin:auto;
}
#gameScreen>div>img{
    height:100px;
    width:140px;
}
#PlayerLeft{
    width:400px;
    height:532px;
    grid-area: PlayerLeft;
}
#PlayerRight{
        width:400px;
    height:532px;
    grid-area: PlayerRight;
}
#PlayerUp{
    width:800px;
    height: 266px;
    grid-area: PlayerUp;
}
#PlayerDown{
    width:800px;
    height:266px;
    grid-area: PlayerDown;
}
#Center{
    grid-area: CenterDeck;
}
#gameScreen>p{
    position: fixed;
    background-color: white;
    top:0;
    right:0;
}
#EndTurn{
    position: fixed;
    bottom: 100px;
    right: 0;
    margin: 10px;
}
#SwitchMode{
    position: fixed;
    bottom: 0;
    right: 0;
    margin: 10px;
}
#DUTCHCall{
    position: fixed;
    bottom: 50px;
    right: 0;
    margin: 10px;
}
#mobileDifficulties{
    background-image: url(Images/MobileDifficulties.png);
    background-size: contain;
    width:100vw;
    height: 100vh;
    position:fixed;
    bottom: 0;
    display: none;
    left:0;
}
/*While not perfectly made specifically for mobile (What you listed as 640), this was set to what I considered a reasonable number for said change.*/

@media screen and (max-width:800px) {
    #mobileDifficulties{
        display: inline;
    }
    button{
        display: none;
    }
    p{
        display: none;
    }
}