.parent-img-popup {
    /*helps img-popup know where it can center*/
    display: relative; /*relative*/
    
    
  }
  
  .holder {
    position: absolute; /*absolute*/
      top: 50%; /* top: 50%; need to have this change based on where I am*/
      left: 50%;
      transform: translate(-50%, -50%);
    
    }

  /*TODO: make it so Gallery doesn't scroll??*/
  .img-popup {
			background-color: hsla(31, 6%, 0%, 0.98); /*really dark transparent brown hsla(31, 6%, 0%, 0.98)*/
		  padding: 25px;
		  
		  position: absolute; /*absolute*/
      top: 50%; /* top: 50%; need to have this change based on where I am*/
      left: 50%;
      transform: translate(-50%, -50%);

		  z-index: 50;
		  
		  
		  /*popup bg dimentions fit to window*/
		  height: 100vh;
		  width: 100vw;
      
			/*popup autos as closed -> needs button to open*/
			visibility: hidden; /*hidden*/

			/*TODO: add open/close movement*/
		}
		
		.img-popup img {
		  
		  position: absolute; /*absolute*/ /* 2. Positions the element relative to the parent */
          /* 3. Moves the top edge to the vertical center of the parent */
      left: 50%;          /* 4. Moves the left edge to the horizontal center of the parent */
      transform: translate(-50%, 0%);

      height: 80%;
		}
		
		.img-popup p {
		  position: absolute; /*absolute*/ /* 2. Positions the element relative to the parent */
      bottom: 10%;         /* 3. Moves the top edge to the vertical center of the parent */
      left: 50%;          /* 4. Moves the left edge to the horizontal center of the parent */
      transform: translate(-50%, 0%);
		  
		  font-size: 20px;
		  max-width: 60%;
		  white-space: nowrap;      /* Prevents text from wrapping to the next line */
      overflow: hidden;         /* Hides any text that overflows the container */
      text-overflow: ellipsis;
		  
		}
		
    /*opening section*/
		.open-img-popup {
			visibility: visible;

			/*TODO: add open/close movement*/
		}
			
		.no-scroll {
      overflow: hidden;
    }

    /*exit button*/		
		.img-exit-btn {
		  float: right; /*causes button to be on the far right*/
		  
		  color: white;
		  font-size: 25px;
		  background-color: #1A1A19;
		}