html{
    height: 100%;
    width: 100%;
    overflow: -moz-hidden-unscrollable;
}
*{
    box-sizing: border-box;
    
}
.hand{
    display:flex;
    flex-direction: row;
    justify-content: center;
}
.playerHand{
    display:flex;
    flex-direction: row;
    justify-content: center;
}
.field{
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.FieldCard{
    width:25vw;
    height:30vh;
    display:flex;
    justify-content: center;
    align-items: center;
}
.card{
    width:10vw;
    height:15vw ;
    z-index: -100;
    position: relative;
}
.winner{
    display:flex;
    flex-direction: column;
    align-items: center;   
}
.gameEnd{
    display:none;
}

.gameStart{
    width:99vw;
    height: 99vh;
    display:flex;
    align-items: center;
    flex-direction: column; 
}
.game{
    display:none;
}


@media(min-width:300px){
    .container{
        display:flex;
        flex-direction: column;
        justify-content: space-around;
        height: 90vh;
    }
    .card{
        width:19vw;
        height:24vw ;
    }
}
@media (min-width: 1050px) {
    .container{
        display:flex;
        flex-direction: column;
        height: 90vh;
    }
    .card{
        width:10vw;
        height:15vw ;
    }
}