html, body {
  overflow: auto;
}    

.layout-container {
  background-image: url('../images/backgroundblankE.jpg'); /* New background image */
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center top;
  }

.page-wrapper {
 border: 15px solid #000000;
 border-top: 0px;
 position: relative;
 min-height: 900px;
}

.author-name-container {
  position: absolute;
  top: 50px;
  left: 140px;
  width: 400px;
  text-align: left;
}
.author-name-container h1 {
  font-family: 'Times New Roman', Times, serif;
  font-variant: small-caps;
  font-size: 3rem;
  line-height: 1.1;
  margin: 0;
}
.author-name-container-2 {
  position: absolute;
  top: 103px;
  left: 177px;
  width: 400px;
  text-align: left;
}
.author-name-container-2 h1 {
  font-family: 'Times New Roman', Times, serif;
  font-variant: small-caps;
  font-size: 3rem;
  line-height: 1.1;
  margin: 0;
}
.title-container {
  position: absolute;
  top: 90px;
  left: 270px;
  width: 500px;
  text-align: right;
  font-style:small-caps;
}
.title-container h2 {
  font-family: 'Times New Roman', Times, serif;
  font-variant: small-caps;
  font-size: 2rem;
  margin: 0;
}
.title-container-2 {
  position: absolute;
  top: 135px;
  left: 270px;
  width: 500px;
  text-align: right;
  font-style:small-caps;
}
.title-container-2 h3 {
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  font-size: 1.5rem;
  margin: 0;
}
.book-text-container {
  position: absolute;
  top: 210px;
  left: 160px;
  width: 480px;
  text-align: justify;
  font-size: 1.1em;
  line-height: 1.3;
}
.book-text-container p {
  text-indent: 2em;
}
.book-cover-container {
  position: absolute;
  top: 90px;
  right: 90px;
  width: 400px;
}
.book-cover-container img {
  width: 70%;
  transform: rotate(15deg);
}
.critique-container {
  position: absolute;
  top: 555px;
  right: 160px;
  width: 400px;
  font-style: italic;
  text-align: left;
  font-size: 1.1em;
  line-height: 1.3;
}
.critique-container-2 {     
  position: absolute;
  top: 750px;
  right: 160px;
  width: 400px;
  font-style: italic;
  text-align: right;
  font-size: 1.1em;
  line-height: 1.3;
}
em {
  font-style: italic;
}

/* === Mobile Responsive Styles (for screens <= 768px) === */
@media (max-width: 768px) {
  
  /* Set solid background color for the main container on mobile */
  .layout-container {
    background-image: url('../images/mobile_background_dark.jpg');
  }
  
  /* Make the 'Go Back' button visible and position it */
  .go-back-button {
    display: inline-block;
    position: absolute;
    top: 10px; 
    left: 15px;
    z-index: 1002; /* Ensure it's above page content */
  }

  /* Make the page wrapper a flex container to enable ordering */
  .page-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 15px 30px 15px;
  }
  
  /* Reset all absolutely positioned elements for a stacked layout */
  .author-name-container,
  .author-name-container-2,
  .title-container,
  .title-container-2,
  .book-text-container,
  .book-cover-container,
  .critique-container,
  .critique-container-2 {
    position: relative; /* This is the crucial change */
    top: auto;
    left: auto;
    right: auto;
    width: 95%;
    margin-bottom: 20px;
    text-align: center;
  }

  /* --- Use your desired order for the stacked content --- */
   .title-container { order: 1; margin-top: 10px; }
  .author-name-container { order: 2; display: none;}
  .author-name-container-2 { order: 3; display: none; }
  .book-cover-container { order: 4; padding: 30px;}
  .title-container-2 { order: 5; }
  .book-text-container { order: 6; }
  .critique-container { order: 7; }
  .critique-container-2 { order: 8; margin-top: -10px; }

  /* --- Fine-tune mobile typography and spacing --- */
  .author-name-container h1,
  .author-name-container-2 h1 {
    font-size: 2.5rem;
  }

  .title-container h2 {
    font-size: 1.9rem;
  }
  
  .title-container-2 h3 {
    font-size: 1.2rem;
    padding-bottom: 20px;
  }
  
  .book-cover-container{
    padding: 10px;
    margin-bottom: 5px;
  }
  .book-cover-container img {
    width: 60%;
    transform: rotate(15deg);
  }

  .book-text-container {
    text-align: justify !important;
  }
  .critique-container {
    text-align: left !important;
  }
  .critique-container-2 {
    text-align: right !important;
  }
  .centered-mobile-text {
    text-align: center !important;
  }
}