/* All the container information */



 


.container {

    
    
    
    
    
    display: grid;
    

    grid-template-rows: auto 300px auto auto auto auto;
    
    grid-template-areas:
    "navigation-section"
    "header"
    "content-section-top"  
    "content-section-middle"  
    "content-section-bottom"  
    "content-section-footer"  

    


   }

   .container { 
    max-width: 900px;
   
   }

   


   
.photos1 {

    float: right;     
    margin: 20px;
    max-height: 35%;
    max-width: 35%;
    border-radius: 5px;
    min-height: 25%;
    min-width: 25%;
  
}

.photos2 {

    float: left;     
    margin: 20px;
    max-height: 35%;
    max-width: 35%;
    border-radius: 5px;
    min-height: 25%;
    min-width: 25%;

}

   
   /* Main Page Sections */
   
   .navigation-section {

    grid-area: navigation-section;


   
    
    
    }

    .header {

        grid-area: header;
        padding: 20px;
        
        background-image: url(../site-img/img.jpg);
        background-repeat: no-repeat;
        background-size: cover;
    }

    .content-section-top {

        display: flex;
        grid-area: content-section-top;
       
        padding: 20px;
       
        
    }

    .content-section-middle {


        font-family:'Times New Roman', Times, serif;
        grid-area: content-section-middle;
    
       
       max-width: 800px;
        padding: 20px;
       
    }

    .content-section-bottom {

        grid-area: content-section-bottom;
       
        padding: 20px;
    }

    .content-section-footer {

        display: flex;
        grid-area: content-section-footer;
     
        
    }


/* Nested Divs */
    
    
                    .correspondence {

                        width: 33%;
                        height: 200px;
                        background-color: rgb(126, 173, 132);
                        margin: 8px 3px;
                        text-align: center;
                        padding-top: 30px;
                    }

                    .captions {

                        width: 33%;
                        height: 200px;
                        background-color: rgb(126, 173, 132);
                        margin: 8px 3px;
                        text-align: center;
                        padding-top: 30px;

                    }

                    .story {

                        width: 33%;
                        height: 200px;
                        background-color: rgb(126, 173, 132);
                        margin: 8px 3px;
                        text-align: center;
                        padding-top: 30px;
                    }

    
.infill {

margin-top: 190px;




}