/* Styles the "Card Flip" page and creates a placeholder for the card */
#container
{
    /* Set these dimensions so the card can be properly displayed in Safari on iPhone */
   	position: relative;
   	left: 30%;
    height: 356px;
    width: 320px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    
    /* Disable tap highlighting */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    
    /* Give some depth to the card */
    -webkit-perspective: 600;
}


/* Applies 3D transform and transition effects to the card. The card has two states: regular and flipped.
   A card is in a regular state when there is an empty transform applied to it, and otherwise in a flipped
   state, where there is a rotational transformation applied. This class is used when the card is in the regular state.
   The "card flipped" class is used when the card is in the flipped state. 
*/
.card 
{
    position: absolute;
    height: 300px;
    width: 200px;
    left: 60px;
    top: 28px;
    
    /* Ensure that the card lives correctly in 3D space */
    -webkit-transform-style: preserve-3d;
    
    /* We apply this property to the card so it can smoothly flip between its sides */
    -webkit-transition-property: -webkit-transform;
    /* Make the animation occur over a period of 1.5 seconds */
    -webkit-transition-duration: 5s;
}


/* Applies the flip animation to the card */
.card.flipped
{

    /* Rotate the card 180 degrees along the y-axis. This animation allows the card to
      toggle between its regular and flipped states. */
    -webkit-transform: rotateY(180deg);
}


/* Styles the card and hides its "back side" when the card is flipped */
.face 
{
    position: absolute;
    height: 300px;
    width: 200px;
    /* Give a round layout to the card */
    -webkit-border-radius: 10px;
    /* Drop shadow around the card */
    -webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5);
    /* Make sure that users will not be able to select anything on the card */
    
    /* We create the card by stacking two div elements at the exact same location. The back of the card 
       is shown when we rotated the card 180 degrees along the y-axis. Setting this property to hidden
       ensures that the "back side" is hidden when the card is flipped
    */
    -webkit-backface-visibility: hidden;
}

/* Styles the suit characters */
.face > p 
{
    margin-top: 0px;
    margin-bottom: 0;
    text-align: center;
    font-size: 50px;
    font-style: normal;
}


/* Styles the front of the card */
.front 
{
    /* Set the color of the suit characters on the card */
    color: rgb(78,150,249);
    /* Background color of this side of the card */
    background-color: rgb(34,65,108);
}

/* Styles the back of the card */
.back 
{
    color: rgb(34,65,108);
    background-color: rgba(78,150,249,0.5);
    text-align: center;
    
    /* Ensure the "back side" is flipped already */
    -webkit-transform: rotateY(-180deg);
}