body{
    font-family: sans-serif
}

a{
    color: #816544;
    column-rule: #816544;
}




.grid {
          display: grid;
        grid-template-columns: .5fr repeat(3, 2fr) .5fr ;
            grid-auto-rows: 1fr 
                .5fr 2fr .5fr .5fr 2fr .5fr 2fr .5fr 2fr .5fr .5fr;
        }

.grid111 {
    grid-template-columns: .5fr repeat(3, 2fr) .5fr;
    grid-auto-rows: .5fr .5fr 2fr 2fr 1fr;
    
    
}

.grid11{
    grid-column: 1/-1;
    grid-row: 1/2;
            
           
        }

.grid2{
    display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr ;
    
    padding-top: 1rem;
}

.grid22{
    display: grid;
            grid-template-columns: 1fr 1fr 1fr ;
    grid-auto-rows: 1fr 1fr 1fr;
    
    padding-top: 1rem;
    
    grid-column: 3/5;
    grid-row: 1/-1;
}




.grid3{
    display: grid;
            grid-template-columns: .5fr repeat(3, 2fr) .5fr ; 
    padding: 1rem;
    
}





.grid33{
    display: grid;
            grid-template-columns: .5fr 2frfr 4fr .5fr; 
}




h2{
    text-align: center;
    text-decoration: underline;
    
    grid-column: 3/4;
    grid-row: 1/-1;
    
}

h1{
    text-align: center;

    
    grid-column: 3/4;
    grid-row: 1/-1;
    
}

h3{
   

    
    grid-column: 3/4;
    grid-row: 1/-1;
    
}

#brown{
    background-color: #816544;
}


        

        .box1{
            background-color: #DEB887;
            padding-top: .5rem;
            color: #816544;
            column-rule: #816544;
            font-family: sans-serif;
            padding-left: 7%;
            text-align: center;
            padding: 5px;
            
            grid-column: 1/-1;
            grid-row: 1/2;
        }


        
        .box2{
            background-color: #DEB887;
            color: #816544;
            font-family: sans-serif;
            margin-top: 5px;
            
            grid-column: 1/-1;
            grid-row: 2/3;
        }
        
        .box3{
            grid-column: 1/-1;
            grid-row: 3/4;
            margin: 0;
            padding: 0;
        }
.box33{
            grid-column: 2/5;
            grid-row:3/4;
            margin: 0;
            padding: 0;
        }
        
        
        .box4{
            background-color: #DEB887;
            color: #816544;
            
            grid-column: 1/-1;
            grid-row: 4/5;
        }
        
        .box5{
            background-color: #DEB887;
            color: #816544;
            
            font-size: 1rem;
            
            
            margin-top: 1rem;
            padding-left: 5%;
            text-align: center;
            
            grid-column: 1/-1;
            grid-row: 5/6;
        }
        
        .box6{
            grid-column: 1/-1;
            grid-row: 6/7;
        }
        
        .box7{
            background-color: #DEB887;
            color: #816544;
            
            padding-top: .5rem;
            padding-left: 5%;
            text-align: center;
            
            
            grid-column: 1/-1;
            grid-row: 7/8;
        }
        
        .box8{
            grid-column: 1/-1;
            grid-row: 8/9;
        }
        
        .box9{
            background-color: #DEB887;
            color: #816544;
            
            padding-top: .5rem;
            padding-left: 5%;
            text-align: center;
            
            
            grid-column: 1/-1;
            grid-row: 9/10;
        }
        
        .box10{
            background-color: #816544;
            color: #DEB887;
            padding-left: 7%;
            text-align: center;
            font-size: .7rem;
            
            grid-column: 1/-1;
            grid-row: 10/11;
        }


#p2 {
    padding: 1rem;
    display: flex;
}

#three{
    height: auto;
    background-size: cover;
    background-image:url("images/three.jpg");
    background-position: center;
    width: 1330px;
    height: 300px;
    margin: 0;
    
    
    grid-column: 1/-1
}



#family{
    height: auto;
    background-size: cover;
    background-image:url("images/family.jpg");
    background-position: center;
    width: 300px;
    height: 300px;
    margin: 0;
    
    
    grid-column: 2/3;
    grid-row: 1/-1;
}

#family2{
    height: auto;
    background-size: cover;
    background-image:url("images/family.jpg");
    background-position: center;
    width: 300px;
    height: 300px;
    margin: 0;
    display: flex;
    float: left;
    
    

}

#horses{
    height: auto;
    background-size: cover;
    background-image:url("images/horses.jpg");
    background-position: center;
    width: 300px;
    height: 300px;
    margin: 0;
    
    
    grid-column: 3/4;
    grid-row: 1/-1
}


#girl{
    height: auto;
    background-size: cover;
    background-image:url("images/girl.jpg");
    background-position: center;
    width: 300px;
    height: 300px;
    margin: 0;
    
    
    grid-column: 4/5;
    grid-row: 1/-1;
}

#cat{
    height: auto;
    background-size: cover;
    background-image:url("images/cat.jpg");
    background-position: center;
    width: 300px;
    height: 300px;
    margin: 0;
    
    
    grid-column: 2/3;
    grid-row: 1/-1;
}

#doggirl{
    height: auto;
    background-size: cover;
    background-image:url("images/doggirl.jpg");
    background-position: center;
    width: 300px;
    height: 300px;
    margin: 0;
    
    
    grid-column: 3/4;
    grid-row: 1/-1
}

#dogy{
    height: auto;
    background-size: cover;
    background-image:url("images/dogy.jpg");
    background-position: center;
    width: 300px;
    height: 300px;
    margin: 0;
    
    
    grid-column: 4/5;
    grid-row: 1/-1;
}

#family1{
    height: auto;
    background-size: cover;
    background-image:url("images/family.jpg");
    background-position: center;
    width: 300px;
    height: 300px;
    margin: 0;
    display: flex;
    float: left;
    margin: 1rem;  
}

#family1{
    height: auto;
    background-size: cover;
    background-image:url("images/family.jpg");
    background-position: center;
    width: 400px;
    height: 400px;
    margin: 0;
    display: flex;
    float: left;
    margin: 1rem;  
}

@media  (max-width: 992px) {
    
    
#three{
    height: auto;
    background-size: cover;
    background-image:url("images/three.jpg");
    background-position: center;
    width: 940px;
    height: 200px;
    margin: 0;
    
    
    grid-column: 1/-1;
    grid-row: 3/4
}


#family{
    height: auto;
    background-size: cover;
    background-image:url("images/family.jpg");
    background-position: center;
    width: 200px;
    height: 200px;
    margin: 0;
    
    
    grid-column: 2/3;
    grid-row: 1/-1;
}
    
    


#horses{
    height: auto;
    background-size: cover;
    background-image:url("images/horses.jpg");
    background-position: center;
    width: 200px;
    height: 200px;
    margin: 0;
    
    
    grid-column: 3/4;
    grid-row: 1/-1
}


#girl{
    height: auto;
    background-size: cover;
    background-image:url("images/girl.jpg");
    background-position: center;
    width: 200px;
    height: 200px;
    margin: 0;
    
    
    grid-column: 4/5;
    grid-row: 1/-1;
}

#cat{
    height: auto;
    background-size: cover;
    background-image:url("images/cat.jpg");
    background-position: center;
    width: 200px;
    height: 200px;
    margin: 0;
    
    
    grid-column: 2/3;
    grid-row: 1/-1;
}

#doggirl{
    height: auto;
    background-size: cover;
    background-image:url("images/doggirl.jpg");
    background-position: center;
    width: 200px;
    height: 200px;
    margin: 0;
    
    
    grid-column: 3/4;
    grid-row: 1/-1
}

#dogy{
    height: auto;
    background-size: cover;
    background-image:url("images/dogy.jpg");
    background-position: center;
    width: 200px;
    height: 200px;
    margin: 0;
    
    
    grid-column: 4/5;
    grid-row: 1/-1;
}
 
    #family1{
    height: auto;
    background-size: cover;
    background-image:url("images/family.jpg");
    background-position: center;
    width: 300px;
    height: 300px;
    margin: 0;
    display: flex;
    float: left;
    margin: 1rem; 
        
        
}
    
    
}
.grid{
          display: grid;
            grid-template-columns: .5fr repeat(3, 2fr) .5fr ;
            
            grid-auto-rows: .5fr 
                .5fr 2fr .5fr .5fr 2fr .5fr 2fr .5fr 2fr .5fr .5fr;
        }


@media  (max-width: 768px){
    
 

    
    #three{
    display: none;
}


#family{
    height: auto;
    background-size: cover;
    background-image:url("images/family.jpg");
    background-position: center;
    width: 150px;
    height: 150px;
    margin: 0;
    
    
    grid-column: 2/3;
    grid-row: 1/-1;
}
    


#horses{
    height: auto;
    background-size: cover;
    background-image:url("images/horses.jpg");
    background-position: center;
    width: 150px;
    height: 150px;
    margin: 0;
    
    
    grid-column: 3/4;
    grid-row: 1/-1
}


#girl{
    height: auto;
    background-size: cover;
    background-image:url("images/girl.jpg");
    background-position: center;
    width: 150px;
    height: 150px;
    margin: 0;
    
    
    grid-column: 4/5;
    grid-row: 1/-1;
}

#cat{
    height: auto;
    background-size: cover;
    background-image:url("images/cat.jpg");
    background-position: center;
    width: 150px;
    height: 150px;
    margin: 0;
    
    
    grid-column: 2/3;
    grid-row: 1/-1;
}

#doggirl{
    height: auto;
    background-size: cover;
    background-image:url("images/doggirl.jpg");
    background-position: center;
    width: 150px;
    height: 150px;
    margin: 0;
    
    
    grid-column: 3/4;
    grid-row: 1/-1
}

#dogy{
    height: auto;
    background-size: cover;
    background-image:url("images/dogy.jpg");
    background-position: center;
    width: 150px;
    height: 150px;
    margin: 0;
    
    
    grid-column: 4/5;
    grid-row: 1/-1;
}
    
    #family1{
    height: auto;
    background-size: cover;
    background-image:url("images/family.jpg");
    background-position: center;
    width: 200px;
    height: 200px;
    margin: 0;
    display: flex;
    float: left;
    margin: 1rem;  
}

}
   
    
 

#family1{
    height: auto;
    background-size: cover;
    background-image:url("images/family.jpg");
    background-position: center;
    width: 180px;
    height: 180px;
    margin: 0;
    display: flex;
    float: left;
    margin: 1rem;  
}

#cat1{
    height: auto;
    background-size: cover;
    background-image:url("images/cat1.JPG");
    background-position: center;
    width: 180px;
    height: 180px;
    margin: 0;
    display: flex;
    float: left;
    margin: 1rem;  
}

#cat2{
    height: auto;
    background-size: cover;
    background-image:url("images/cat2.JPG");
    background-position: center;
    width: 180px;
    height: 180px;
    margin: 0;
    display: flex;
    float: left;
    margin: 1rem;  
}







.grid111 {
    grid-template-columns: .5fr repeat(3, 2fr) .5fr;
    grid-auto-rows: .5fr .5fr 2fr 2fr 1fr;
    
    
}





.grid34{
    display: grid;
            grid-template-columns:  2fr 5fr  ;
    
}

a {
    padding: 1rem;
}


 .box1{
            background-color: #DEB887;
            padding-top: .5rem;
            color: #816544;
            column-rule: #816544;
            font-family: sans-serif;
            padding-left: 7%;
            text-align: center;
            padding: 5px;
            
            grid-column: 1/-1;
            grid-row: 1/2;
        }


        
        .box2{
            background-color: #DEB887;
            color: #816544;
            font-family: sans-serif;
            margin-top: 1rem;
            padding: 1px;
            
            
            grid-column: 1/-1;
            grid-row: 2/3;
        }
        
.box10{
            background-color: #816544;
            color: #DEB887;
            padding-left: 7%;
            text-align: center;
            font-size: .7rem;
            padding: 1rem;
            margin: 1rem;
            
            grid-column: 1/-1;
            grid-row: 10/11;
        }

.good {
    grid-column: 1/-1;
    grid-row: 3/4;
}


form:focus {
    text-align: right;
    margin: 1rem;
    padding: 1rem;
    color:#816544;
    text-decoration: none;
    border: none;
    outline: none;
    align-content: center;
}

#mySubmit {
    width: 10rem;
    grid-column: 2/3;
    
}

#ahhh {
    padding: 1rem;
    margin: 1rem;
}


.grid222{
    display: grid;
            grid-template-columns: 1fr 1fr 1fr ;
    grid-auto-rows:.5fr 1fr 1fr 1fr .5fr;
    
    
    text-align: center;
    
    grid-column: 3/5;
    grid-row: 1/-1;
}