.page-container {
  width: 1500px;
  height: 2000px;
  background-color: black;
  padding: 0px;
  margin: 0 auto;        /* centers the container horizontally */
/* /display: flex;         /* optional — helps you center boxes inside */
  flex-wrap: wrap;       /* allows multiple rows of boxes */
 /*justify-content: center; /* centers boxes inside */
  align-items: flex-start;
  
 }
   /*.layout-container {
    position: relative; /* All absolutely positioned children will be relative to this */
    /* background-color: black;
    width: 1500px;
    height: 2000px;
    border: 2px solid #333;
    margin: 10px auto; /* Center the container on the page */
 

  .grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    /* Adjust the number of columns */
   column-gap: 150px;
    row-gap: 150px;
    gap: 500px;
    /* Adjust the gap between items */
    
  }
/* Common styles for the iframe containers */
  .container-item {
    position: absolute;
    padding: 15px;
    border: 1px solid #ccc;
    background-color: black;
    overflow-y: auto; /* Enable scrolling for content overflow */
  }
/* Specific styles for each container */
  /*#story-container-1 {
    width: 350px;
    height: 250px;
    top: 20px; /* Position from the top of the parent */
   /* left: 30px; /* Position from the left of the parent */
  /* Specific styles for each iframe container to place them in different spots */
    
  }
  
    #image-container-1 {
    width: 200px;
    height: 150px;
    top: 300px;
    right: -700px; /* Position from the right of the parent */
    background-color: #FAF9F6;
    text-align: center;
  }

  #info-container {
    width: 400px;
    height: 200px;
    bottom: 20px; /* Position from the bottom of the parent */
    left: 200px;
    background-color: #FAF9F6;
  }
  #iframe-container-1 {
    width: 350px;
    height: 400px;
    top: 250px;
    left: 600px;
    column-gap: 150px;
    row-gap: 150px;
  }

  #iframe-container-2 {
    width: 200px;
    height: 150px;
    top: 100px;
    right: -1100px;
    background-color: #FAF9F6;
    text-align: center;
  }
  
  #iframe-container-3 {
    width: 400px;
    height: 600px;
    bottom: -1200px;
    left: 1000px;
    background-color: #FAF9F6;
  }

  /* Rule to make the iframe fill its parent container */
  .container-item iframe {
    width: 100%;
    height: 100%;
    border: none;
  }
  #iframe-container-6 {
    width: 350px;
    height: 400px;
    top: -700px;
    left: 300px;
    column-gap: 150px;
    row-gap: 150px;
  }
  #iframe-container-4 {
    width: 350px;
    height: 400px;
    top: 675px;
    left: 975px;
    column-gap: 150px;
    row-gap: 150px;
  }
  #iframe-container-5 {
    width: 400px;
    height: 500px;
    top: 1400px;
    right: -600px;
  }
 /* .container {
     width: 100%; 
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
   background-color: black;
  border: 5px solid #ee3e80; padding: 1px; width: 100%; border-radius : 10px; -moz-border-radius: 10x; -webkit-border-radius: 10 px;
    /* Set the background color for your grid items*/
    
    
    
    
    /* Add padding for spacing */
    
  

  /*.container p {
   width: 25%;
   height: 100px;
  font-size: 25pt;
  text-align: justify;
  color: #E74C3C;
  margin-bottom: 0;*/

  /* Other styles for your text or objects can be added here */
  

  }
 
  .pink-text {
  color: #d4af37;
    font-size: 12px;
}

    .yellow-text {
      color: black;
      font-size: 25px;
    }
  
    .red-text {
      color: black;
      font-size: 25px;
   
    }

  .story-container {
  width: 200px ; /* Set your desired width */
  height: 600px; /* Set your desired height */
   bottom: -1200px;
    left: 1000px;
  border: 1px solid #ccc; /* Optional: Add a border for visibility */
  padding: 0px; /* Optional: Add padding inside the container */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
  display: flex; /* Use flexbox for easy layout of title and content */
 flex-direction: column; /* Stack title and content vertically */
   
}

/*.story-container h2 {
  margin-top: 2px; /* Remove default top margin for the title */
 /* margin-bottom: 1px; /* Add some space below the title */
  

.story-content {
  flex-grow: 1; /* Allow the content area to take up remaining vertical space */
  overflow-y: auto; /* Enable vertical scrolling if content overflows */
 /* padding-right: 5px; /* Optional: Add padding to prevent scrollbar from touching text */
}
  .story-text {
  color: #ee3e80;
  font-size: 18px;
  line-height: 1.6;
  font-family: "Courier New", monospace;
  text-align: left;
  word-wrap: break-word;
  text-align: center; /* Optional: Center the title */
  max-height: 400px;
  overflow-y: auto;
  padding: 10px 15px; 
  background-color: FAF9F6;
  border: 2px solid magenta;
  border-radius: 8px;

  scrollbar-width: thin;
  scrollbar-color: magenta black;
}

.story-text::-webkit-scrollbar {
  width: 8px;
}
.story-text::-webkit-scrollbar-thumb {
  background-color: magenta;
  border-radius: 6px;
 }
.story-text::-webkit-scrollbar-track {
  background-color: black;