body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Cleaner font */
    line-height: 1.6; /* Adds "breathing room" between lines */
    color: #333; /* Softens the pure black text for less eye strain */
    max-width: 1000px; /* Prevents text from stretching too wide on big monitors */
    margin: 0 auto; /* Centers the content on the screen */
    padding: 20px; /* Keeps text from touching the edge of mobile screens */
  }

  img {
    max-width: 100%; /* Ensures your new images never overflow the screen */
    height: auto;
    display: block;
    margin: 20px auto; /* Centers images with space above and below */
  }

  a {
    color: #0056b3; /* A slightly more modern blue for links */
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }


.book-cover {
    float: right;
    margin: 10px 0 20px 20px;
    max-width: 40%;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
}

@media screen and (max-width: 600px) {
    .book-cover {
        float: none;
        display: block;
        margin: 20px auto;
        max-width: 90%;
    }
}

.book-cover-left {
    float: left;
    margin: 10px 20px 20px 0; /* Space on the right side of the image */
    max-width: 40%;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
}

  margin-left: 20px;  /* Puts space between the text and the image */
  margin-bottom: 10px;/* Puts space below the image */
  max-width: 200px;   /* Keeps the book cover at a reasonable size */
  border: 1px solid #ddd; /* Adds a subtle frame around the book */
  box-shadow: 3px 3px 10px rgba(0,0,0,0.1); /* Adds a slight "3D" lift */
}

h1 {
  font-size: 2.2rem;   /* Makes the main title nice and large */
  color: #1a202c;      /* A deep, modern charcoal gray */
  line-height: 1.2;
  margin-top: 40px;
  margin-bottom: 20px;
  border-bottom: 2px solid #e2e8f0; /* Adds a subtle underline "shelf" */
  padding-bottom: 10px;
}

h2 {
  font-size: 1.6rem;
  color: #2d3748;
  margin-top: 30px;
}


/* Style for images floating on the right (Desktop) */
.float-right-img {
    float: right;
    margin: 10px 0 20px 20px; /* Space around the image */
    max-width: 40%;           /* Prevents the image from being too big */
    height: auto;             /* Maintains original aspect ratio */
}

/* Responsive Tweak for Mobile (Screens smaller than 600px) */
@media screen and (max-width: 600px) {
    .float-right-img {
        float: none;          /* Removes the right-side float */
        display: block;       /* Necessary for centering */
        margin: 20px auto;    /* Centers the image with auto margins */
        max-width: 90%;       /* Makes image larger and clear on small screens */
    }
}


/* This container holds both the image and the text */
.book-section {
  display: flex;
  align-items: flex-start; /* Keeps the text aligned with the top of the image */
  gap: 20px;               /* Adds a nice 20px gap between the image and text */
  margin-bottom: 30px;     /* Space below this entire section */
}

/* This controls the book image size */
.book-cover {
  max-width: 200px;        /* Adjust this to fit your preferred image width */
  height: auto;
}

/* This handles the text side */
.book-description {
  flex: 1;                 /* Allows the text to take up the remaining space */
  line-height: 1.6;        /* Makes the paragraphs easier to read */
}

/* Responsive: Stacks the image on top of text on small mobile screens */
@media (max-width: 600px) {
  .book-section {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

.book-description {
  flex: 1;
  min-width: 300px; /* Adjust this number based on your layout */
}

<nav class="sticky-nav">
  <a href="/">Home</a>
  <a href="/introductionenergybody.html">Introduction</a>
  <a href="/earlyexperiencesenergybody.html">Early Experiences</a>
  <a href="/experiencesfacebook.html">Facebook Posts</a>
</nav>