body {
      background:url('IMG_2092.jpg') center / cover no-repeat fixed, #2c3e50;
    }  
    body {
      background-color: black;
      color: white;
      font-family: 'Times New Roman';
      margin-top: 1%;
      padding: 20px;
    }
    img {
      max-width: 100%;
      height: auto;
      margin-top: 20px;
    }

    /* Sets up the side-by-side screen layout */
    .container {
      display: flex;
      flex-wrap: wrap;       /* Drops image below text if screen gets too small (like phones) */
      gap: 50px;             /* Adds a clean space between text and your image */
      align-items: flex-start; /* Keeps the image at the top of its column */
    }

    /* Controls the text layout area on the left */
    .left-content {
      flex: 1;               /* Lets text occupy all the remaining screen room */
      min-width: 300px;      /* Prevents text column from squishing too narrow */
      margin-right: 320px;   /* Crucial: Creates a blank safety buffer zone so text never crawls under your floating image */
    }

    /* Sets your image area to float dynamically on the screen */
    .right-content {
      position: fixed;      /* Forces the element to stay in view while scrolling */
      top: 40px;            /* Pins it 40px away from the top edge of the browser window */
      right: 40px;          /* Pins it 40px away from the right edge of the browser window */
      width: 250px;         /* Increased sizing from your previous setup */
      z-index: 100;         /* Keeps the image layered strictly on top of other content layers */
    }

    /* Forces your image to properly scale within its right-side container */
    .right-content img {
      width: 100%;           
      height: auto;
    }

/* Mobile view adjustments (screens 768px wide or smaller) */
@media (max-width: 768px) {
  .container {
    flex-direction: column-reverse; /* Places image above the text on small screens */
    gap: 20px;
  }

  .left-content {
    margin-right: 0; /* Clears the desktop margin buffer */
    min-width: 100%;
  }

  .right-content {
    position: static; /* Removes fixed position so it scrolls naturally */
    width: 180px;      /* Fits better on mobile screens */
    margin: 0 auto;    /* Centers the image horizontally */
  }
}