.cards-container{
    width: 70%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.deck-container{
    display: flex;
}

.dealer,.player{
    display: flex;
    margin: 0 auto;
    transition: all 1.5s ease;
    min-height: 9em;
}

.deck-image{
    width: 5.68em;
    height: 8em;
    border: 1px solid black;
    border-radius: .3em;
    box-shadow: 2px 2px 5px black;
    margin-right: 10px;
    align-self: flex-end;
    justify-self: flex-end;
}

.end-of-round-message {
    font-size: 0;
    align-self: center;
    justify-self: flex-start;
    transition: font-size .4s ease-in;
    flex: 1;
}

.expand {
    font-size: 6vw !important;
}

.deck{
    width: 5.68em;
    height: 8em;
    border: 1px solid black;
    border-radius: .3em;
    box-shadow: 2px 2px 5px black;
}

.card {
    width: 5.68em;
    height: 8em;
    border: 1px solid black;
    border-radius: .3em;
    box-shadow: 2px 2px 5px black;
    display: flex;
    flex-direction: column;
    justify-items: center;
    margin: 5px;
    transition: all 1s ease;
}

.suit {
    align-self: flex-start;
    font-size: 3em;
    line-height: 1;
    text-align: left;
    padding: 1px;
    transform: translateY(-.1em);
}

.diamond .suit::after {content: '\2666';}
.club .suit::after {content: '\2663';}
.spade .suit::after {content: '\2660';}
.heart .suit::after {content: '\2665';}

.diamond.card {
    color: red;
}

.club.card{
    color: black;
}

.spade.card{
    color: black;
}

.heart.card{
    color: red;
}

.rank{
    text-align: center;
    margin: 0 auto;
    font-size: 3em;
}

.ace .rank::after {content: 'A';}
.two .rank::after {content: '2';}
.three .rank::after {content: '3';}
.four .rank::after {content: '4';}
.five .rank::after {content: '5';}
.six .rank::after {content: '6';}
.seven .rank::after {content: '7';}
.eight .rank::after {content: '8';}
.nine .rank::after {content: '9';}
.ten .rank::after {content: '10';}
.jack .rank::after {content: 'J'}
.queen .rank::after {content: 'Q'}
.king .rank::after {content: 'K'}

.dealer .card.in-deck{
    transform: translate(1500%, 200%) rotate(360deg);
}

.player .card.in-deck{
    transform: translate(1500%, -150%) rotate(360deg);
}

button{
    display: block;
    border: 0;
    margin: 3px;
    transition: flex 1s ease, font-size 1s ease, box-shadow .1s ease, transform .1s ease, background-color .2s ease;
    cursor: pointer;
}

button:active{
    box-shadow: 0px 0px 5px #666;
    transform: scale(1.4, 1.4);
}

button:hover{
    filter: brightness(85%);
}

.buttons{
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.flex-1{
    flex: 1;
}

.bet-and-cash{
    font-size: 2vw;
}

.row{
    display: flex;
}

.debug{
    display: none !important;
}

.buttons div{
    margin: 0 auto;
    flex: auto;
    display: flex;
}

.buttons .active button{
    flex: 4;
    font-size: 2vw !important;
    padding: 1vw;
    background-color: lightgreen;
    border-radius: 5px;
}

.invalid{
    background-color: salmon !important;
}

#insufficient-money{
    color: salmon;
    transition: all .4s ease;
}

#insufficient-money.off-screen{
    transform: translateX(-100vw);
}

.total-cash{
    font-weight: bold;
    margin-left: 5px;
}

.down-card{
    transform: rotateY(180deg);
}

.split {
    display: flex;
    flex: 1;
    margin-left: 2em;
    margin-right: 2em;
}