/* ==========================================================================
   Modern card design — the colour-independent rules the modern card needs on
   top of the shared guest stylesheets. This file is linked only for occasions
   whose card design is modern, so a rule written here cannot reach the classic
   card. It loads after common.css and vFlip-card.css and before
   custom-styles.php, which overrides these per occasion.
   ========================================================================== */

/* The heading takes the occasion's own font instead of the script face the
   shared guest stylesheet gives it. */
.card-modern #rsvp
{
  font-family: inherit;
}

/* The envelope sits centred on the page instead of offset from it. */
body:has(> .container.card-modern) #envelopeDiv
{
  margin-left: auto;
  margin-right: auto;
}

body:has(> .container.card-modern) #envelopeDivWrapper
{
  left: auto;
}

body:has(> .container.card-modern) #secondEnvelopeDiv
{
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

/* The shared stylesheet shrinks the whole page at phone widths; the modern card
   shrinks itself, so the page around it keeps its own size. */
@media only screen and (max-width: 420px)
{
  html:has(> body > .container.card-modern)
  {
    zoom: 1;
  }

  .container.card-modern
  {
    zoom: 0.8;
  }
}