/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
body {
    background-image: url("big paper bg lop.jpg");
    background-size: cover;     
    background-color: red;
    
}

.left-section {
  text-align: left;
  padding: 10px;
  /* Optional: width: 50%; to keep it from stretching */
}
.left-section h1 {
  margin-bottom: 5px; /* Adjust spacing below header */
}

  h1 {
    text-align: center;
  }
  
  
  
  body {
    /* Add some margin to the body so the box does not overlap with default margin */
    margin: 0;
    padding: 0;
    /* Optional: Add height to test scrolling behavior */
    height: 200vh;
}

.middle-left-container {
    display: flex; /* Enables flexbox layout for the container */
    align-items: center; /* Vertically centers the child items within the container */
    height: 100vh; /* Ensures the container takes up the full height of the viewport */
    justify-content: flex-start; /* Aligns content to the start (left) of the container (this is the default) */
    width: 100%; /* Ensures the container spans the full width */
}

.text-section {
    /* Optional: Add some padding or width constraints to the text section itself */
    padding-left: 100px;
    max-width: 400px; 
    /* The text inside will naturally be left-aligned unless otherwise specified */
    text-align: left; 
}

.image-left {
    float: left;
    width: 200px; /* Adjust size as needed */
    margin-right: 15px; /* Adds space between the image and the text */
    margin-bottom: 15px; /* Adds space below the image */
}

.image-container {
    position: relative;
    /* Optional: define container size or other styles */
    width: 100px;
    height: 20px;
    border: none;
}

.image-container img {
    position: absolute;
    top: 10px;   /* Distance from the top of the container */
    left: 20px; /* Distance from the left of the container */
}


        .container {
            display: flex;
            height: 250px;
            width: 250px;
        }
        .container img {
            
            width: 100%; /* This sets each image to take up 30% of the container width */
            margin: 1%;  /* This adds some space between the images */
            overflow: hidden; 
            
        }
       
  .wrapper {
  position: relative; /* This is the key: it becomes the positioning context */
  width: 100px; /* Define a size for the wrapper */
  height: 300px;
}

.pos-image {
  position: absolute; /* Position the images absolutely within the wrapper */
  z-index: 1; /* Place images on a specific layer */
}

#img1 {
  top: 10;
  left: 5;
}

#img2 {
  bottom: 20;
  right: 5;
}

.text-box-overlay {
  position: absolute;
  top: 50px;
  left: 50px;
  background-color: white;
  padding: 10px;
  z-index: 2; /* Place text box above images */
}