.whiteText {

    color: white;
    text-shadow: 0px 0px 2px black;

}

.back {

    background-image: url('https://cs.csubak.edu/~jabbott/media/forest.jpg');
    background-repeat: no-repeat;
    background-size: cover;

}

#p1{
    float: left;
    height: 30%;
    width: 49%;
    border: 2px solid green;
}
#p2{
    float: right;
    height: 30%;
    width: 49%;
    border: 2px solid black; 
}
#oneturn{
    position: fixed;
    float: right;
    width: 40%;
    background: red;
}
#twoturn{
    float: left;
    width: 40%;
    background-image: ;
}

#playerArea {

    position: relative;
    width: 60em;
    height: 53em;
    margin-left: auto;
    margin-right: auto;

}

.one {
    
    left: 11%;
    top: 1em;

}

.two {
    
    left: 31%;
    top: 1em;

}

.three {

    left: 51%;
    top: 1em;

}

.four {

    left: 71%;
    top: 1em;

}

.five {

    left: 11%;
    top: 18em;
}

.six {

    left: 31%;
    top: 18em;

}

.seven {

    left: 51%;
    top: 18em;

}

.eight {

    left: 71%;
    top: 18em;

}

.nine {

    left: 11%;
    top: 35em;

}

.ten {

    left: 31%;
    top: 35em;

}

.eleven {

    left: 51%;
    top: 35em;

}

.twelve {

    left: 71%;
    top: 35em;

}

.start {

    width: 50%;
    height: 25%;


}

.card {
    
    max-height: 16em;
    max-width: 11em;
    min-height: 16em;
    min-width: 11em;
    position: absolute;

}

.hidden {

    display: none;
    opacity: 0.0;

}

@keyframes fadein {

    from{ opacity: 0.0;}
    to  { opacity: 1.0;}

}

.show {

    animation-name: fadein;
    animation-duration: 3s;
    animation-fill-mode: forwards;

}

@keyframes fadeScores {

    from{ opacity: 0.0; }
    to  { opacity: 1.0; }

}

.showScore {

    animation-name: fadeScores;
    animation-duration: 3s;
    animation-fill-mode: forwards;

}

@keyframes shuffle {

    from { transform: rotate(0deg);}
    to   { top: 40%;  left: 40%; 
           transform: rotate(360deg);                    }

}

.shuffleCards {

    animation-name: shuffle;
    animation-duration: 2s;
    animation-iteration-count: 2;
    animation-direction: alternate;
    animation-timing-function: linear;

}

@keyframes shuffleRight {

    from { transform: rotate(0deg);}
    to   { top: 40%;  left: 40%; 
           transform: rotate(-360deg); }

}

.shuffleCardsRight {
    
    animation-name: shuffleRight;
    animation-duration: 2s;
    animation-iteration-count: 2;
    animation-direction: alternate;
    animation-timing-function: linear;

}

@keyframes flipCard {

    from { transform: rotateY(0deg); }
    to   { transform: rotateY(180deg); }

}

.flip {

    animation-name: flipCard;
    animation-duration: 1s;
    animation-timing-function: linear;

}

@keyframes flipUp {

    from { transform: rotateY(180deg); }
    to   { transform: rotateY(0deg); }

}

.flipC {

    animation-name: flipUp;
    animation-duration: 1s;
    animation-timing-function: linear;

}