#wrapper    {
    width:80%;
    margin-left:100px;
    margin-right:auto;   
    } 
nav     {
    font-family:fantasy;
    position:relative;
    text-align:center;
    justify-content: center;
    justify-content: space-evenly;
    top:0;
    padding-top:100px;
}
body    {
    background-image:url("images/white.png");
    
}
nav a:hover   {
    background-color: #F5F5F5;
    color:#708090;
}
nav ul  {
    list-style-type: none;
    margin:0 0 0 0;
    padding:0 0 0 0;
    display:flex;
    flex-flow:row nowrap;
}
nav ul li   {
    width:100%;
}
nav ul li a    {
    text-decoration: none;
    padding:10px;
    margin-left:20px;
    background-color: #A9A9A9;
    color:#fff;
    display: block;
    color: #FFFFFF;
padding-top:5px;
    padding-bottom:10px;
   text-align: center;
    padding-top:20px;

}
div{
    text-align: center;
}
black   {
    background-color:#000000;
    order:1;
    grid-row:1 / 2;
    grid-column: -1 / 1;
}

h1  {
    text-align: center;
    font-family:cursive;
    text-decoration: none;
    list-style-type: none;
}
form    {
    display:grid;
    grid-template-rows: auto;
     grid-template-columns: 200px 1fr;
    grid-gap: 1rem;  
    width:100%;
}
#submit {
    width:8rem;
    grid-column: -2 / 3;   
}
label   {
    text-align: right;
    padding:5px;
}

#pictures div img   {
    grid-template-columns: repeat(2, 1fr);
    padding-top:100px;
    height:auto;        
    width:100%;
}
.pumpkin    {
    height:250px;
    width:250px;
    padding-top:100px;
    
}
.hello  {
    height:250px;
    width:250px;
}
.ish   {
    height:250px;
    width:250px;
}
#logo   {
    float:right;
    height:125px;
    width:125px;
    padding-right:20px;
    padding-top:20px;
    padding-left:20px;
}
 .family    {
        height:400px;
        width:400px;
          
    }
.mama   {
    height:400px;
    width:350px;
    padding-left:20px;
    padding-top:30px;
}

h3  {
    text-align:center;
    font-family: monospace;
}
p   {
    text-align: center;
    padding: 1rem;
    font-family:fantasy;
}

main p,   {
    background-color:#D3D3D3;
    
}
main h1 {
    border-bottom: 1px solid #808080;
}
footer  {
    text-align:center;
    padding:1rem;
}
@media only screen and (max-width:992px)    {
    #wrapper    {
  width:100%;
}
    nav {
    width:100%
    height:auto;
    float:none;
}
    body    {
        margin:0;
    }
    .family {
        height:300px;
        width:300px;
    }
    .mama   {
        height:300px;
        width:250px;
    }
    #pictures div img   {
    grid-template-columns: repeat(2, 1fr);
        height:auto;;
        width:100%;
        float:none;
    }
    nav ul  {
        flex-flow:row nowrap;
    }
    
    #logo   {
        float:right;
        height:150px;
        width:150px;
    }
    nav ul li a {
        padding:15px;
        margin-left:10px;
        padding-top:20px;
        
    }
    .hello  {
        display:none;
    }

 
}
@media only screen and (max-width:768px) {
    wrapper{
        width:100%;
    }
    
    body{
        margin:0;
    }
    nav ul  {
        flex-flow:row nowrap;
        padding:20px;
    }
    #pictures div img  { 
    height:auto;
    width:100%;
        float:none;
         grid-template-columns: repeat(2, 1fr);
    }
    .hello, .ish, .pumpkin  {
        height:250px;
        width:250px;
        float:none;
        flex-wrap:nowrap;
    }
      .family, .mama  {
        height:200px;
        width:200px;
          float:none;
    }
    
    
    #logo   {
        float:right;
        height:100px;
        width:100px;
    }
    nav {
        display: flex;
        flex-direction: column;
       
         }

     .mama, .hello, .ish    {
        display:none;
    }
   
 
}