body { 
   color: #f7994d; 
   background-color: #f1b17d;
   font-family: 'Courier New', Courier, monospace;
     }

#wrapper {
   background-color: #f1b17d;
   background-image: linear-gradient(to bottom, #0706061a, #f0710a);
        }
   
header { 
   color: #f1b17d#FFFFFF; 
   background-color: #000000;
   text-align: center;
  	}

h1 {
   margin-bottom: auto;
   margin-top: auto;
   font-family:'Courier New', Courier, monospace;
   letter-spacing: 0em;
   padding-top: 1em;
   padding-bottom: 0em;
      }
      nav { 
        font-weight: bold;
        font-size: 105%;
          }
     
     nav a {
      padding-left: .5em;
      padding-right: .5em;
       transition-property: color;
        transition-duration: 1s;
        transition-timing-function: ease-in-out;
         }
     nav ul {
        list-style-type: none;
        list-style-position: inside;
        font-size: 1em;
             }
     nav a:link {
        color: #3f3e3e;
                }
     nav a:visited {
           color: #04f8e4;
                   }
      nav a:hover {
        color: #570257;
           }
   main {
    padding-top: 10px;
    padding-right: 30px;
    padding-bottom: 20px;
    padding-left: 30px;
    display: block;
    background-color: #000000;
    overflow: auto;     
        }
h2 {color: #f03e08;
    font-family:'Courier New', Courier, monospace;
    text-align: center;
    padding-bottom: 50px;
    padding-top: 50px;
    margin-bottom:.5px;
   }

h3 { color: #570257;
    font-family:'Courier New', Courier, monospace;
    text-align: left;
   line-height: normal;}

h4 {color: #f03e08;
    font-family:'Courier New', Courier, monospace;
    text-align: left;}

form {
   display: flex;
   flex-flow: column nowrap;
     }
footer {
   background-color: #f1b17d;
   color: #3f3e3e;
    font-family:'Courier New', Courier, monospace;
    font-size: 100%;
    text-align: center;
    padding: 4em;
        }
    
#homehero {
   height: 300px;
   background-image: url(logo.jpeg);
   background-size: 200px 180px;
   background-position: center;
   background-repeat: no-repeat;
           }

#originhero {
   height: 300px;
   background-image: url(origin.JPG);
   background-size: auto;
   background-position: center;
   background-repeat: no-repeat;
           }
#moviehero {
    height: 300px;
    background-image: url(movie.JPG);
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
            } 
#traditionhero {
    height: 300px;
    background-image: url(traditions.JPG);
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
        } 
#jackhero {
    height: 300px;
    background-image: url(jack.JPG);
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
        }                       

#haunthero {
    height: 300px;
    background-image: url(haunt.JPG);
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
        } 
#recipehero {
    height: 300px;
    background-image: url(food.JPG);
    background-size: auto;
    background-position: center;
    background-repeat: no-repeat;
                }                                             
table {
   border: 4px solid #f03e08;
   border-collapse: collapse;
    }
tr:first-of-type {background-color: #f03e08; 
color: #000000;}

td, th {
   padding: 1em;
   border: 4px solid#f03e08;
        }

td {
   text-align: center;
   }

.text {
   text-align: center;
      }

@media(min-width: 400px) {
   nav ul{
     display: block;
     flex-direction: row;
     flex-wrap: nowrap;
     justify-content: center;   
         }
 section{
     padding-left: 2em;
     padding-right: 2em;
          }

   form {
     display: grid;
     grid-template-columns: 8em 1fr;
     grid-template-rows: auto;
     grid-gap: 2em; gap: 2em;
     color: #f03e08;
        }
#wrapper{
    width: 60%;
    margin: auto;
    border: 1px solid #000000;
    box-shadow: 1px 1px #000000;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 200px auto;
   
          }

@media(min-width: 800px) {
   nav ul{
     flex-flow: ;
     padding-top: 1em;
     display: flex;
         }
nav {
   text-align:center;
   padding-left: 1em;
   padding-right: 1em;
    }

   
 header{
     grid-row: 2 / 2; grid-column: 1 / 3;
                   }
 nav{
     grid-row: 1/ 2; grid-column: 1 / 3;
                   }
 div{
     grid-row: 1 / 3; grid-column: 1/ 3;
                   }
 main{
      grid-row: 3 / 4; grid-column: 1 / 3;
                   }

footer{
     grid-row: auto; grid-column: 1 / 5;
         }