/* the styles start here at the top of the page */
/*the body styles*/
body{background-color:#E27730;
;}

/*the h1 styles using the modular typographic scale and calc() function, for the 
font sizes in the h1, nav and p*/
h1{font-size: calc(4rem);
    font-family:Georgia, 'Times New Roman', Times, serif;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right:50px;}
/*the image styles*/
img{display:block;
border-style:double;
margin-bottom:50px;}

/*here I have three different styles for images*/
.taco{justify-content:left;
margin-left:350px;}

.taco1{justify-content:left;
margin-right:0px;
margin-bottom:50px;}

.taco2{justify-content:left;
margin-left:50px;}

/*the navigation menu styles with typographic scale and calc() function*/
 nav{width:calc(1rem);
     margin-right: 50px;
} 

/*here I have three different styles for the nav menu and the food menu*/
.list1 {
    list-style-type: none;
    font-family:'Lucida Sans';
    margin:0;
    padding:0;
    font-size: 35px;
    }
.li1{background-color:peru;
    display:inline;} 

.list2{
    justify-content:center;
    list-style-type: none;
    font-size:35px;
    margin-right:500px;
    margin-left:500px;
}

/*the navigation styles*/
a:link{
    color:white;}

a:visited{
    color:darkslategray;}

a:hover{
    
    color:gray;}

a:active{
    
    color:yellow;}
 



/*here is the styles for the grid model*/

.container{
    display:grid;
    grid-template-areas:
      "header"
      "nav"
      "main"
      "footer"}

 .item1 {
    grid-area: header;
 }     

.item2 {
    grid-area: nav;
}

.item3 {
    grid-area: main;
}

.item4 {
    grid-area: footer;
}

/*here is the style for the inline-flex*/
.container1{
    display:inline-flex;
    margin-left: 150px;
    margin-top: 150px;
}
/*paragraph styles*/
/*paragraph container has a calc(function) for the width of the paragraphs 
using the applied typographic scale.*/
p{font-size: calc(1.5rem);
    font-family:Georgia, 'Times New Roman', Times, serif;
    text-align:center;
    justify-content:center;
    width:calc(350px);
}

.p1{margin:100px;}

.p2{margin-left:585px;}

/*the styles for the form*/
form{
    display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom:50px;
  margin-right: 750px;
  margin-left: 750px;
}
/*the styles for the footer*/
footer{font-size: 1.5rem;
font-family:'Courier New', Courier, monospace;
text-align:center;
padding-top:50px;
border-style:double;
margin-top: 25px;
margin-right: 50px;} 


/*here are the media querries*/
 
@media only screen and (min-width: 360px){
h1{font-size: calc(2rem);}
 nav{font-size: calc(.75rem);}
 .container1{
    display:inline-flex;
    margin-left:0px;
    margin-top: 150px;}
 img{width:200px;
    height:150px;}
 p{font-size: calc(1rem);
  width:calc(100px);}
 footer{font-size: .75rem;}
}

@media only screen and (min-width: 900px){
    h1{font-size: calc(2.5rem);}
 nav{font-size: calc(.16rem);}
 .container1{
    display:inline-flex;
    margin-left:0px;
    margin-top: 150px;}
    img{width:401px;
    height:361px;}
 p{font-size: calc(1rem);
   width:calc(75px);}
 footer{font-size: 1.25rem;}
 }

@media only screen and (min-width: 1400px){
    h1{font-size: calc(2.8rem);} 
 .container1{
    display:inline-flex;
    margin-left:0px;
    margin-top: 150px;}
  img{width:401px;
    height:361px;}
 p{font-size: calc(2rem);
   width:calc(250px);}
 footer{font-size: 1.5rem;}
}