body {
   
      background-color:#FFFFFF; 
      color:#666666;
      font-family:arial, sans-serif;
      background-attachment: fixed;
      background: linear-gradient(to bottom, #eeeeee, #ffffff);
      margin: 0px;
      
     }

#wrapper {
        display: grid;
        grid-auto-rows: minmax(0px, auto);
        grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 175px)) minmax(0px, 1fr);
        margin-bottom: 30px;
        column-width: 960px;
         }

h1    {
       grid-row: 1 /2;
       margin-left: 50px;
       grid-column: 5 / 6; 
       position: relative;
       color: #ffffff;
       font-size: 50px;
       margin-right: 70px;
      }
       
      
       



nav   {
        background-color: Black;
        grid-row: 3/4;
        grid-column: 1 / 9;
        
        font-weight: bold;
        position: static;
        top: 0;
     }
  
      
#Homenetwork {
           background-image: url("homenetwork.jpg");
           background-size: cover;
           background-repeat: no-repeat;
           background-position: 50% 50%;
           height:350px;
           grid-row: 1/4;
           grid-column: 1 / 9;
          }


#homeconfig {
             background-image: url("homeconfig.jpg");
             background-size: cover;
             background-repeat: no-repeat;
             background-position: 50% 50%;
             height:300px;
            }

#picture3 {
             background-image: url("picture3.jpg");
             background-size: cover;
             background-repeat: no-repeat;
             background-position: 50% 50%;
             height:200px;
            }

#contact    {
            background-image: url("contact.jpg");
            background-size: cover;
            background-repeat: no-repeat;
            background-position: 50% 50%;
            height:400px;
            grid-row: 1/4;
            grid-column: 1 / 9;
            }
#about      {
            background-image: url("about.jpg");
            background-size: cover;
            background-repeat: no-repeat;
            background-position: 50% 50%;
            height:400px;
            grid-row: 1/4;
            grid-column: 1 / 9;
            }


*  {
    box-sizing: border-box;
    }

.column {
         float: left;
         width: 33.33%;
         padding: 5px;
         }

/* Clearfix (clear floats) */
.row::after {
             content: "";
             clear: both;
             display: table;
             }

#statment   {
            text-align: center;
            font-size: 25px;
            }
           
         

     
#h2    {
       color:#424242; 
      
       text-align: center;
      
       }
       
       
#center  {
          text-align: center; 
         }
          
       
#center1  {
          text-align: center; 
         }
          
                     
h3    {
       color: #000000;
       margin-bottom: 60px;
       grid-row: 2 / 3;
      
      }

span {
      color: #ffa500; 
      border: solid;
       
      }

main  { padding-left: 2em;
       padding-right: 2em;
       display: block;
       background-color: #FFFFFF;
       grid-row: 4/5;
       grid-column: 2 / 8;
       padding-top: 1px;
       padding-bottom: 1px;
       background-color: #E8E8E8;
      
     
      }


          
        
#h2 
       {
        margin-top: 60px;
        font-size: 50px;
        color: black;
        text-align: center;
       }


  a   { text-decoration: none;
        color:#ffa500;  
      } 
           
  nav a { text-decoration: none; }



nav a 
      { color: #ffffff; 
       padding: 1rem 0rem;
       display: block;
       text-align: center;

        }
nav a:hover { background-color: Orange; }

nav ul {
        list-style-type: none;
        padding: 0px;
         
        margin: 0px;
        display: flex;
        flex-flow: nowrap;
        }

nav ul li {
           width: 100%;
           
          }
        
       

form {
       display: grid;
       grid-auto-rows: auto;
       grid-template-columns: 200px 1fr;
       grid-gap: 0.75rem;
       width:80%;
       text-align: left;
       
       }

input, textarea        {
                        font-size: 1rem;
                        padding: 10px;
                        color: #666666;
                        background-color: #fafafa;
                        border: none;
                        
                        margin-top: 1em;
                        margin-left: 100px;
                        
                        
                        }
                        
                        
                        
label {
       padding:10px;
       text-align: left;
       font-size: 1rem;
       grid-column: 1/ 2;
       width: 200px;
       margin-right: 10px;
       margin-top:1em; 
       
      }

       
      

        

 
.input:focus {
             outline: none;
             background-color: #f0f0f0;
             }

.textarea:focus {
                 outline: none;
                 background-color: #f0f0f0;
                }


#mySubmit {
           width: 10rem;
           grid-column: 2 /3;
          }

          
@media only screen and (max-width: 995px) {

#wrapper {
         grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 768px)) minmax(0px, 1fr);
         }
nav {
     grid-row: 2/4;
     grid-column: 5 / 8;
     margin-left: 50px;
     }

nav ul {
        flex-flow: column nowrap;
       }



#homenetwork {
             grid-row: 2 / 3;
             grid-column: 5 / 8;
             height: auto;
            
             }
                                
        

p            { float: none;
             width: 100%;
             padding-right: 0px;
           }  

h1         {
            grid-column: 5 / 7;
            grid-row: 1 / 2;
            font-size: 30px;
            }
}

@media only screen and (max-width: 768px) {

      



body      {
           grid-template-columns:100%;
          }
h1   {
      grid-column: 5 / 6;
      grid-row: 2 / 3;
      font-size: 15px;
      }
nav {
      grid-row: 3/4;
      grid-column: 5/ 8;
      text-align: center;
      
     }

#homenetwork {
             height: auto;
             }
       

}

   