/* CSS RESET */

html, body, div, span, applet, object, iframe,  
h1, h2, h3, h4, h5, h6, p, blockquote, pre,  
a, abbr, acronym, address, big, cite, code,  
del, dfn, em, img, ins, kbd, q, s, samp,  
small, strike, strong, sub, sup, tt, var,  
b, u, i, center,  
dl, dt, dd, ol, ul, li,  
fieldset, form, label, legend,  
table, caption, tbody, tfoot, thead, tr, th, td,  
article, aside, canvas, details, embed,  
figure, figcaption, footer, header, hgroup,  
menu, nav, output, ruby, section, summary,  
time, mark, audio, video {  
margin: 0;  
padding: 0;  
border: 0;  
font-size: 100%;  
font: inherit;  
vertical-align: baseline;  
}

/* Generla Style */

html{
    font-size:62.5%;
}
body{
    font-size:1.6rem;
    line-height: 1.5;
    font-family: 'Raleway', sans-serif;	
}
h1, h2, p, .recipes, .description {	
    font-family: 'Raleway', sans-serif;	
    text-align: center;	
    margin: 4%;	
}	
h1, h2{
    font-size:6rem;
    margin:0;
}
a {	
    text-decoration: none;	
    color: black;
    font-size:2.5rem;	
}	
a:hover {	
    font-weight: bold;	
}	
.name{	
    font-size: 150%;	
    font-weight: 200;	
}	
img {	
    height:39rem;	
    object-fit: cover;	
    display: block;	
    margin: 2%;	
    margin-top: 4%;	
    margin-left: auto;	
    margin-right: auto;	
    border-radius: 2%;	
}	
img:hover {	
    opacity: 80%;	
}	

/* Header Style */

header{
    display:flex;
    justify-content: center;
}
nav{
    width:30%;
    display:flex;
    justify-content:space-evenly;
    margin-top:5%;
}
nav a{
    color:#626262;
}
nav span{
    border-left:3px solid #626262;

}

/* Title Section Style */

.title-container{
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
}
.title-container div {	
    background-image: url('images/lambda-recipe-main.jpg');		
    background-position: center;	
    color: black;	
    width:80%;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height:60vh;
    margin:5% 0;
}	
.title-container div:hover {	
    opacity: 80%;	
}	
.title-container hr{
    width:80%;
}
button{
    padding:1% 3%;
    font-size: 1.6rem;
    border-radius:6px;
    border:2px solid #626262;
    box-shadow: 2px 2px 1px #626262;
    transition: 2s;
}
button:hover{
    background-color:#626262;
    border:2px solid white;
    color:white;
    box-shadow: 2px 2px 1px white;
}

/* Recipes Section Style */

.recipes-container{
    display:flex;
    justify-content: space-around;
    width:80%;
    margin:0 auto;
}

.recipes{
    width:40%;
    text-align:center;
}
.recipes img{
    width:100%;
}

/* laptop or wider responsive code (1024px) */

@media only screen and (min-width: 801px) and (max-width: 1024px){
    nav {
      min-width: 60%; 
      font-size: 2rem;
      padding: 0 10px; 
    }  
    
  .title-container div {
      width: 100%;
      min-height: 300px;
      margin: 10% 0 2% 0;
    }
  
  .title-container hr {
      width: 100%;
    }
  
  .recipes-container {
    display: flex; /* Added compared with <500px */
    flex-direction: row; /* Added compared with <500px */
    align-items: center;
    justify-content: center; /* justify-content: flex-start; at <500px */
    width: 90%; /*width 90% at <500px */
    }
  
  .recipes {
      width: 100%;
    }
  
  .recipes img {
      object-fit: contain;
      height: 100%;
      width: 80%; /* width adjusted from 70% at <500px */
    }
  }

/* tablet responsive code (800px) */

@media only screen and (min-width: 501px) and (max-width: 800px){
    nav {
      min-width: 60%; 
      font-size: 2rem;
      padding: 0 10px; 
    }  
    
  .title-container div {
      width: 100%; 
      min-height: 300px;
      margin: 10% 0 2% 0;
    }
  
  .title-container hr {
      width: 100%; /*width 100% at <500px */
    }
  
  .recipes-container {
      flex-wrap: wrap; /* two column */
      width: 90%; /*width 90% at <500px */
    }

  .recipes { 
     width: 30%;  /*width adjusted from 100% at <500px */
    } 
  
  .recipes img {
      object-fit: contain;
      height: 100%;
      width: 80%; /*Width adjusted from 70% at <500px */
    }
  } 

/* media query setting a max width of 500px, font-size 2rem relative to root, padding 10px  */

@media only screen and (max-width: 500px){
  nav {
    min-width: 60%; 
    font-size: 2rem;
    padding: 0 10px; 
  }  
  
.title-container div {
    width: 100%;
    min-height: 300px;
    margin: 10% 0 2% 0;
  }

.title-container hr {
    width: 100%;
  }

.recipes-container {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 90%;
  }

.recipes {
    width: 100%;
  }

.recipes img {
    object-fit: contain;
    height: 100%;
    width: 80%; /* single column */
  }
} 
	
/*footer code*/

footer{
    display:flex;
    justify-content: center;
}