body 
{
  margin: 0px;
  -webkit-user-select: none;
}


/* 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 */
  height: 356px;
  width: 320px;
  background-color: rgba(56,108,179, 0.5);
  
  /* 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: 1.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: 36px;
  margin-bottom: 0;
  text-align: center;
  font-size: 92px;
}


/* 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 
{
  background-color: #ffffff;
  
  /* Ensure the "back side" is flipped already */
  -webkit-transform: rotateY(180deg);
}