


/* All the container information */

.container {

    height: 2500px;
    text-align: center;
    
    

    display: grid;
    grid-gap: 20px;
    grid-template-columns: 50% auto;
    grid-template-rows:
    
    
    

    2% /* Nav section */
    
    300PX /* header */
    
    8% 8% 8% 8% 8% 8% 8% 8% 8% 8%/* 17 caption sections */
    
    auto; /* footer */
    

    
    grid-template-areas:
    
    "navigation-section navigation-section "
    "header header"
     
    "caption-1 caption-2"
    
    "caption-3 caption-4"
    
    "caption-5 caption-6"
  
    "caption-7 caption-8"
   
    "caption-9 caption-10"

    "caption-11 caption-12"
    
    "caption-13 caption-14"
   
    "caption-15 caption-16"
  
    "caption-17 caption-18"
    
    "caption-19 caption-20"
    

   
    
    "content-section-footer content-section-footer"  

    }


     
    
    
    
    
        .navigation-section {

        grid-area: navigation-section;
        background-color: darksalmon;
        
        }
    
        .header {
    
            grid-area: header;
            background-color: rgb(150, 44, 9);

            background-image: url(../site-img/img.jpg);
        
            background-repeat: no-repeat;
            background-size: cover;
            
        }
    



        .caption-1 {
    
            grid-area: caption-1;
            background-color: #f5cdef;
            text-align: center;
          
           
            
            
        }
    
        .caption-2 {
    
            grid-area: caption-2;
            background-color: #f5cdef;
            
        }
    
        .caption-3 {
    
            grid-area: caption-3;
            background-color: #f5cdef;
            
        }
    
        .caption-4 {
    
            grid-area: caption-4;
            background-color: #f5cdef;
            
        }
    
    
    
  
        .caption-5 {
    
            grid-area: caption-5;
            background-color: #f5cdef;
            
            
        }
    
        .caption-6 {
    
            grid-area: caption-6;
            background-color: #f5cdef;
            
        }
    
        .caption-7 {
    
            grid-area: caption-7;
            background-color: #f5cdef;
            
        }
    
        .caption-8 {
    
            grid-area: caption-8;
            background-color: #f5cdef;
            
        }


        .caption-9 {
    
            grid-area: caption-9;
            background-color: #f5cdef;
            
        }
    
        .caption-10 {
    
            grid-area: caption-10;
            background-color: #f5cdef;
            
        }

        .caption-11 {
    
            grid-area: caption-11;
            background-color: #f5cdef;
            
        }
    
        .caption-12 {
    
            grid-area: caption-12;
            background-color: #f5cdef;
            
        }

        .caption-13 {
    
            grid-area: caption-13;
            background-color: #f5cdef;
            
        }
    
        .caption-14 {
    
            grid-area: caption-14;
            background-color: #f5cdef;
            
        }

        .caption-15 {
    
            grid-area: caption-15;
            background-color: #f5cdef;
            
        }
    
        .caption-16 {
    
            grid-area: caption-16;
            background-color: #f5cdef;

        }

        .caption-17 {
    
            grid-area: caption-17;
            background-color: #f5cdef;
            
        }
    
        

        .caption-18 {

            grid-area: caption-18;
            background-color: #f5cdef;
        
    }




    .caption-19 {

        grid-area: caption-19;
        background-color: #f5cdef;
    
}



.caption-20 {

    grid-area: caption-20;
    background-color: #f5cdef;

}





        .content-section-footer {

            display: flex;
            grid-area: content-section-footer;
            background-color: rgb(116, 40, 17);

        }

        .smallpic {

            max-width: 150px;
            max-height: 125px;
            padding: 25px;
            float: left;
            
        }

