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

body{
  background: #000;
  overflow: hidden; /* remove scrolling; delete if you want scroll */
}

p{
  margin: 0;
  width: 100vw;
  height: 100vh;

  /* responsive text density */
  font-size: clamp(6px, 1.1vw, 12px);
  line-height: clamp(6px, 1.1vw, 12px);

  text-align: justify;

  background-image: url("image6.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  /* IMPORTANT: remove fixed on mobile (we'll handle it below) */
  background-attachment: scroll;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/********** MOBILE **********/
@media (max-width: 768px) {
  p {
    background-image: url("image5.jpg");
    background-position: center 20%;            /* adjust if needed */

    /* optional: slightly denser text for phones */
    font-size: clamp(7px, 1.8vw, 10px);
    line-height: clamp(7px, 1.8vw, 10px);
  }
}