html {
     scroll-behavior: smooth;
     font-size: 16px;
 }

 body {
     font-size: 1rem;
 }



 /*******************/
 /* STRUCTURE       */
 /*******************/
 #pagehead {
/*
     width: 100wh;
     height: vh;
     background-color: #333;
     margin-bottom: 0px;
*/

/*     background-image: url(images/DSC_0071.jpg);*/
     /* The image used */
/*     background-position: center;*/
     /* Center the image */
/*     background-repeat: no-repeat;*/
     /* Do not repeat the image */
/*     background-size: cover;*/
     /* Resize the background image to cover the entire container */
/*     background-attachment: fixed;*/
 }

 .content {
     width: 60%;
     margin: 0 auto;
 }

 .divider {
     width: 100%;
     height: 60vh;
     margin-top: 60px;
     margin-bottom: 60px;
 }



 .img_responsive {
     width: 60%;
     height: auto;
 }

 .content figure {
     margin-top: 2rem;
 }


 .ingredients {
     background-color: darkgrey;
     width: 55vw;
     margin: 0 auto;
     padding: 40px 0;
     /*    padding: 0 40px 0 40px;    */
     /*    height: 55vh;*/
     /*    float: left;*/
     /*    align-content: center;*/
     margin-bottom: 60px;
 }

 .instructions {
     background-color: darkgrey;
     width: 55vw;
     /*    float: left;*/
     /*    align-content: center;*/
     margin-bottom: 60px;
     margin: 0 auto;
     padding: 40px 0;

 }








 #thegrid {

     width: 100%;
     margin: 90px auto;
     display: grid;

     grid-gap: 20px;

     grid-template-areas:
         "one two three";

     grid-template-columns: 1fr 1fr 1fr;

 }

 @media only screen and (max-width: 800px) {

     #thegrid {

         grid-template-areas:
             "one"
             "two"
             "three";

         transition: all 0.3s linear;

         grid-template-columns: 1fr;

     }
 }

 .img_responsive {
     width: 100%;
     height: auto;

 }

 #thegrid {

     width: 100%;
     margin: 90px auto;
     display: grid;

     grid-gap: 20px;

     grid-template-areas:
         "one two three";

     grid-template-columns: 1fr 1fr 1fr;

 }

 @media only screen and (max-width: 800px) {

     #thegrid {

         grid-template-areas:
             "one"
             "two"
             "three";

         transition: all 0.3s linear;

         grid-template-columns: 1fr;

     }
 }

 .img_responsive {
     width: 100%;
     height: auto;

 }

 .pattern2 {
     /*
    background-color:lightgrey;
    background-image: url(images/pattern20kb.png);
*/
 }

 .one {
     grid-area: one;
 }

 .two {
     grid-area: two;
 }

 .three {
     grid-area: three;
     
     
     

     

 }

 /*******************/
 /* TYPOGRAHY       */
 /*******************/

 h1 {
     line-height: 100vh;
     /*     color: #999995;*/
     color: floralwhite;
     text-align: center;
     font-weight: 800;
     font-size: 7rem;
     font-family: livory, serif;
     font-weight: 400;
     font-style: normal;

 }

 h2 {
     text-align: center;
     line-height: 15vh;
     font-size: 2rem;
     color: white;
     font-weight: 400;
     text-transform: uppercase;
     letter-spacing: 20px;
     font-family: livory, serif;
     font-style: normal;

 }

 .ingredients li {
     text-align: center;
     font-size: 1.2rem;
     color: white;
     padding: 0 5vw;
     font-family: pelago, sans-serif;
     font-weight: 300;
     font-style: normal;
     line-height: 60px;
 }


 .instructions ol li {
     text-align: center;
     font-size: 1.2rem;
     color: white;
     padding: 0 8vw;
     margin-bottom: 1rem;
     font-family: pelago, sans-serif;
     font-weight: 300;
     font-style: normal;
     line-height: 40px;
 }

 p {
     line-height: 2rem;
     color: #444;
     font-size: 1.3rem;
     background-color: #fdfdfc;
     font-weight: 350;
     padding-top: 60px;
     padding-bottom: 40px;
     font-family: pelago, sans-serif;
     font-style: normal;
 }

 figcaption {
     margin-top: rem;
     margin-bottom: 4rem;
     font-weight: 700;
     font-style: italic;
     font-size: 1.5 rem;
     color: #777;
 }

 footer {
     width: 100vw;
     background-color: #34260f;
     /*    background-image: url(images/pattern20kb.png);*/
 }

 footer p {
     padding: 60px 10%;
     width: 80%;
     /*    color: #e9bd40;*/
     text-transform: uppercase;
     letter-spacing: 7px;
     font-size: .6rem;
     font-weight: 700;
 }

 body {
     margin: 50px;
 }

 .wrapper {
     display: grid;
     grid-template-columns: 300px 300px 300px;
     grid-gap: 20px;
     background-color: #fff;
     color: #444;
 }

 .box {
     background-color: #444;
     color: #fff;
     border-radius: 5px;
     padding: 20px;
     font-size: 150%;
 }