{
  	margin: 50;
  	padding: 0;
  	font-family: 'Poppins', sans-serif;
  	box-sizing: border-box;
 }
 .container{
   width: 100%;
   /*Omit height, so full height will be covered by full background:*/
   height: 100vh; 
   color: #000;    /*this doesn't matter */
   background: #afafaf;  /* this does matter, 7f7f7f (127) was too dark; af=175 */
   overflow-y: scroll;
   scroll-snap-type: y mandatory;
 }
 .slides{
  width: 100vw; /* 100% of the viewport width */
  height: 100vh; /* 100% of the viewport height */
  /*background-color: lightblue; /* Example background color */*/
  /*background-color: #888; /* Example background color */ */
  background-color: #282; /* omitting this non-functional info moves text to left! */
  display: flex; /* Use flexbox for centering content */
  justify-content: center; /* Center horizontally */
  align-items: center; /* Center vertically */
  flex-direction: column; /* Stack content vertically */
  text-align: center; /* Center text within the slide */

    
    
    
       /*width: 100vw   ;*/
   /*height: 100vh;*/
   /*width: 300px   ;*/
   /*height: 600px;*/
   /*display: flex;*/
   /*align-items: center;*/
   /*gap: 50px;*/
   /*color: #a00;*/
   scroll-snap-align: start;
   /*background: #00f;*/
}
.slides img{
   /*max-width: 1800px;*/
   /*object-fit: cover;*/
   /*max-width: 90vw;*/

   /*height: 80vh;*/
   /*width: auto;*/
   
/*from https://stackoverflow.com/questions/6169666/how-to-resize-an-image-to-fit-in-the-browser-window:   */
	max-width: 80%;
	max-height: 85vh;
	margin: auto;

}
.slides h2{
   font-size: 20px;
   font-weight: 600;
   max-width: 850px;
}