*{
  box-sizing:border-box;
}

html,
body{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
}

body{
  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;

  background:#2b0908;
}


/* ==================================================
   DESKTOP / LANDSCAPE BOOK
   ================================================== */

.book-cover{
  position:relative;

  /*
    Desktop artwork ratio = 1536 × 1024
    1536 / 1024 = 1.5
  */
  width:min(100vw, calc(100vh * 1.5));

  aspect-ratio:3 / 2;

  background-image:
    url("../images/book-cover.png?v=2");

  background-repeat:no-repeat;

  background-position:center;

  background-size:contain;
}


/* ==================================================
   DESKTOP ENTER INVITATION BUTTON
   Invisible clickable area over image button
   ================================================== */

.enter-invitation{
  position:absolute;

  left:37.4%;
  top:81.6%;

  width:24.1%;
  height:8.1%;

  border-radius:999px;

  cursor:pointer;

  text-decoration:none;

  z-index:10;
}


.enter-invitation:focus-visible{
  outline:3px solid #f2c56b;

  outline-offset:3px;
}


.enter-invitation:hover{
  box-shadow:
    0 0 24px
    rgba(238,190,93,.45);
}



/* ==================================================
   MOBILE / PORTRAIT
   ================================================== */

@media (max-width:700px){

  html,
  body{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    overflow:hidden;
  }

  body{
    display:flex;
    align-items:center;
    justify-content:center;
    background:#2b0908;
  }


  .book-cover{

    position:relative;

    /*
      Mobile image is portrait.
      Use the SAME ratio as the image.
      Approx. 1024 x 1536 = 2 / 3
    */

    width:min(
      100vw,
      calc(100vh * 0.6667)
    );

    width:min(
      100vw,
      calc(100dvh * 0.6667)
    );

    height:auto;

    aspect-ratio:2 / 3;


    background-image:
      url("../images/book-cover-mobile.png?v=2");

    background-size:100% 100%;

    background-position:center;

    background-repeat:no-repeat;
  }


  /*
    MOBILE CLICKABLE BUTTON

    Now these percentages are relative
    to the actual portrait image,
    not the entire phone screen.
  */

  .enter-invitation{

    left:33%;

    top:75.1%;

    width:34%;

    height:5.2%;

    z-index:20;
  }

}


/* ==================================================
   VERY NARROW PHONES
   ================================================== */

@media (max-width:380px){

  .enter-invitation{

    left:31%;

    width:38%;
  }

}



/* ==================================================
   LANDSCAPE PHONE
   Use desktop artwork again
   ================================================== */

@media
(max-width:900px)
and (orientation:landscape){

  .book-cover{

    width:min(
      100vw,
      calc(100vh * 1.5)
    );

    height:auto;

    aspect-ratio:3 / 2;


    background-image:
      url("../images/book-cover.png?v=2");

    background-size:contain;
  }


  .enter-invitation{

    left:37.4%;

    top:81.6%;

    width:24.1%;

    height:8.1%;
  }

}