body {
    background-image: url("/img/felt.jpeg");
    background-color: #4F752C;
    background-size: cover;
    background-attachment: fixed;
    color:#FFFFFF;
   }

.score {
    font-size: 100px;
    text-align: center;
}
.score p {
    line-height: 1;
}
.hand {
    text-align: center;
}
.card {
    width:179px;
    height:250px;
    display: inline-block;
    margin-left: -100px;
    background-size: cover;
    border:none;
    background-color: transparent;
}
.card:first-child {
    margin-left: 0;
}
#gameboard .grid-x {
    align-items: center;
    height: 100%;
}

.spade2{background-image: url("/img/cards/2S.png");}
.spade3{background-image: url("/img/cards/3S.png");}
.spade4{background-image: url("/img/cards/4S.png");}
.spade5{background-image: url("/img/cards/5S.png");}
.spade6{background-image: url("/img/cards/6S.png");}
.spade7{background-image: url("/img/cards/7S.png");}
.spade8{background-image: url("/img/cards/8S.png");}
.spade9{background-image: url("/img/cards/9S.png");}
.spade10{background-image: url("/img/cards/10S.png");}
.spadeJ{background-image: url("/img/cards/JackS.png");}
.spadeQ{background-image: url("/img/cards/QueenS.png");}
.spadeK{background-image: url("/img/cards/KingS.png");}
.spadeA{background-image: url("/img/cards/AceS.png");}

.heart2{background-image: url("/img/cards/2H.png");}
.heart3{background-image: url("/img/cards/3H.png");}
.heart4{background-image: url("/img/cards/4H.png");}
.heart5{background-image: url("/img/cards/5H.png");}
.heart6{background-image: url("/img/cards/6H.png");}
.heart7{background-image: url("/img/cards/7H.png");}
.heart8{background-image: url("/img/cards/8H.png");}
.heart9{background-image: url("/img/cards/9H.png");}
.heart10{background-image: url("/img/cards/10H.png");}
.heartJ{background-image: url("/img/cards/JackH.png");}
.heartQ{background-image: url("/img/cards/QueenH.png");}
.heartK{background-image: url("/img/cards/KingH.png");}
.heartA{background-image: url("/img/cards/AceH.png");}

.club2{background-image: url("/img/cards/2C.png");}
.club3{background-image: url("/img/cards/3C.png");}
.club4{background-image: url("/img/cards/4C.png");}
.club5{background-image: url("/img/cards/5C.png");}
.club6{background-image: url("/img/cards/6C.png");}
.club7{background-image: url("/img/cards/7C.png");}
.club8{background-image: url("/img/cards/8C.png");}
.club9{background-image: url("/img/cards/9C.png");}
.club10{background-image: url("/img/cards/10C.png");}
.clubJ{background-image: url("/img/cards/JackC.png");}
.clubQ{background-image: url("/img/cards/QueenC.png");}
.clubK{background-image: url("/img/cards/KingC.png");}
.clubA{background-image: url("/img/cards/AceC.png");}

.diamond2{background-image: url("/img/cards/2D.png");}
.diamond3{background-image: url("/img/cards/3D.png");}
.diamond4{background-image: url("/img/cards/4D.png");}
.diamond5{background-image: url("/img/cards/5D.png");}
.diamond6{background-image: url("/img/cards/6D.png");}
.diamond7{background-image: url("/img/cards/7D.png");}
.diamond8{background-image: url("/img/cards/8D.png");}
.diamond9{background-image: url("/img/cards/9D.png");}
.diamond10{background-image: url("/img/cards/10D.png");}
.diamondJ{background-image: url("/img/cards/JackD.png");}
.diamondQ{background-image: url("/img/cards/QueenD.png");}
.diamondK{background-image: url("/img/cards/KingD.png");}
.diamondA{background-image: url("/img/cards/AceD.png");}

#dealerboard:not(.playing) .hand .card:first-child{
    background-image:url("/img/cards/blueback.png");
}
#dealerboard #dealerscore{
    display: none
}
#dealerboard.playing #dealerscore{
    display: block
}
#dealerboard {
    border-bottom:1px solid yellow;
}
#controls {
    background-color: rgba(0, 0, 0, 0.4);
    border-right:1px solid yellow;
    text-align: center;
    padding: 50px;
    position:relative;
}
#controls h3 {
    font-size: 70px;
}
#controls h4{
    font-weight: 300;
}
#controls .button-group{
    position:absolute;
    bottom:0;
    left: 0;
    width:calc(100% - 32px);
    margin: 16px;
}
#gameboard.complete {
    filter: grayscale(100%) blur(2px);
}

#gamestatus{
    display: none;
    position: absolute;
    top:50%;
    left:50%;
    transform:translateY(-50%) translateX(-50%);
}
#gamestatus.win,
#gamestatus.tie,
#gamestatus.lose{
    display: block;
}
#gamestatus h3{
    display: none;
    font-size: 50px;
}
#gamestatus.win h3.win{
    display: block;
}
#gamestatus.tie h3.tie{
    display: block;
}
#gamestatus.lose h3.lose{
    display: block;
}