* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    html, body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    .paper:first-child .front {
      position: relative;
      width: 96%;
      height: 100%;
      overflow: hidden;
      padding: 0;
      margin: 0;
    }
    .object-cover {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 120%; /* Slightly larger than container */
      height: 120%; /* Slightly larger than container */
      transform: translate(-50%, -50%); /* Center the element */
      border: none;
      margin: 0;
      padding: 0;
      pointer-events: none;
      object-fit: cover;
    }
    body {
      height: 100%;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: sans-serif;
      overflow: hidden;
      background-color: black;
    }
    .content {
      background-color: #EDE1C0;
      width: calc(100vh);
      height: 100vh;
      padding: 50px;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
    }
    /* Book */
    .book {
      width: calc(45vh);
      position: relative;
      transition: transform 0.5s;
    }
    .paper {
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      perspective: 1500px;
    }
    .front {
      backface-visibility: hidden;
    }
    .front, 
    .back {
      position: absolute;
      width: 95%;
      height: 100%;
      top: 0;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      transform-origin: left;
      transition: transform 1s;
    }
    .front {
      z-index: 1;
    }
    .back {
      z-index: 0;
    }
    .back canvas,
    .back-content {
      transform: rotateY(180deg);
    }
    /* Paper Flipped */
    .flipped .front,
    .flipped .back {
      transform: rotateY(-180deg);
    }
    .cover-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    canvas {
      width: 100%;
      height: 100%;
    }
    .canvas {
      width: 50%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: white;
      transform-origin: left;
      transition: transform 0.1s;
    }