body{
   font-family: "PT sans", sans-serif;
   background-color: #fffffa;
   background-color: #fffffa;}
   
header{
   background-image: url(img/green-bar.svg);
   background-image: url(https://images.unsplash.com/photo-1427434991195-f42379e2139d?q=80&w=3732&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
   background-repeat: no-repeat;
   background-size: contain;
   height: 325px;
   background-color: #fffffa;
   padding-top: 1rem;
   background-color: #3f4f11;
   color: white;}

header img{
   width: 275px;
   display: block;
   margin: 0rem auto;}

header h1{
   font-size: 2.5em;}

header h2{ 
   margin: 1rem 1rem 1rem 1rem;
   padding-top: 10px;
   font-size: 1.1em;}
    
img{
   max-width: 100%; 
   height: auto;}

h1{
   color:white;
   margin: 2.5rem 0 3rem 0;
   text-align: center;
   font-size: 2em;}
   
.what h2{ 
   font-size: 1.75rem;
   margin: 1rem 0 1rem 0;
   font-weight: bold; }

.what div p{
   margin: 1rem 0 1rem 0;
   color:rgb(51, 147, 51)}

.when h2{
   font-size: 1.75rem;
   margin: 1rem 0 1rem 0;
   font-weight: bold;}

.when div p{
   margin: 1rem 0 1rem 0;
   color:rgb(51, 147, 51)}

.where h2{
   font-size: 1.75rem;
   margin: 1rem 0 1rem 0;
   font-weight: bold;}

.where div p{
   margin: 1rem 0 1rem 0;
   color:rgb(51, 147, 51)}

.how h2{ 
   font-size: 1.75rem;
   margin: 1rem 0 1rem 0;
   font-weight: bold;}

.how div p{
   margin: 1rem 0 1rem 0;
   color:rgb(51, 147, 51)}

.how h3{
   font-size: 1.2rem;
   margin: 2.2rem 0 1rem 0;
   font-weight: bold;
   color: #3f4f11;}


section{
   width: 90vw;
   margin: 2rem auto;
   padding: 1rem;
   background-color: #E2F5D5;}
      
footer{ 
background-color:#3f4f11; 
border: 1px solid #ADC7BD; 
padding: 40px;}

footer p { 
color: white
}

.why h2{
   font-size: 1.75rem;
   margin: 1rem 0 1rem 0;
   font-weight: bold;}

.why div p{
   margin: 1rem 0 1rem 0;
   color:rgb(51, 147, 51)}

@media screen and (min-width: 21.75rem){

   header h2{ 
      margin: 1rem 1rem 1rem 1rem;
      padding-top: 25px;
      font-size: 1.1em;}}

@media screen and (min-width: 23.875rem) {

   header h2{ 
      margin: 1rem 1rem 1rem 1rem;
      padding-top: 35px;
      font-size: 1.1em;}}
      

@media screen and (min-width: 25.3125rem) {

   header h2{ 
      margin: 1rem 1rem 1rem 1.3rem;
      padding-top: 42px;
      font-size: 1.1em;}}

@media screen and (min-width: 26.3125rem) {
   header h2{ 
      margin: 1rem 1rem 1rem 1.4rem;
      padding-top: 47px;
      font-size: 1.1em;}}

@media screen and (min-width: 27.6875rem) {
   header{
      background-image: url(img/green-bar.svg);
      background-image: url(https://images.unsplash.com/photo-1427434991195-f42379e2139d?q=80&w=3732&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
      background-repeat: no-repeat;
      background-size: contain;
      height: 325px;
      background-color: #3f4f11;
      padding-top: 1rem;
      color: white;}

   header h2{ 
      margin: 1rem 1rem 1rem 1.5rem;
      padding-top: 47px;
      font-size: 1.1em;}}

@media screen and (min-width: 28.123rem) {
      
   header h2{ 
      margin: 1rem 1rem 1rem 1rem;
      padding-top: 47px;
      font-size: 1.1em;}}

@media screen and (min-width: 28.875rem) {
   header{
      background-image: url(img/green-bar.svg);
      background-image: url(https://images.unsplash.com/photo-1427434991195-f42379e2139d?q=80&w=3732&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
      background-repeat: no-repeat;
      background-size: contain;
      background-color: white;
      background-color:#3f4f11;
      height: 325px;
      padding-top: 1rem;
      color: white;}
      
      header h2{ 
         margin: 1rem 1rem 1rem 1rem;
         padding-top: 47px;
         font-size: 1.1em;
         color: white;}}

@media screen and (min-width: 29.0625rem) {

   header h2{ 
      margin: 1rem 1rem 1rem 1.7rem;
      padding-top: 47px;
      font-size: 1.1em;
      color: white;}}

@media screen and (min-width: 33.4375rem) {
   
   header{
      background-image: url(img/green-bar.svg);
      background-image: url(https://images.unsplash.com/photo-1427434991195-f42379e2139d?q=80&w=3732&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
      background-repeat: no-repeat;
      background-size: contain;
      background-color: white;
      height: 325px;
      padding-top: 1rem;
      color: white;}

}


@media screen and (min-width: 36.1875rem) {
   
   header{
      background-image: url(img/green-bar.svg);
      background-image: url(https://images.unsplash.com/photo-1427434991195-f42379e2139d?q=80&w=3732&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
      background-repeat: no-repeat;
      background-size: contain;
      background-color: white;
      height: 325px;
      padding-top: 1rem;
      color: white;}
   
   header img{
      width: 275px;
      display: block;
      margin: 0rem auto;}


   header h2{ 
      margin: 1rem 1.1rem 1rem 1.7rem;
      padding-top: 47px;
      font-size: 1.1em;
      color: white;}
      
      }


      @media screen and (min-width: 37rem) {
         header img{
            width: 275px;
            display: block;
            margin: 0rem auto;}
         header{
            background-image: url(img/green-bar.svg);
            background-image: url(https://images.unsplash.com/photo-1427434991195-f42379e2139d?q=80&w=3732&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);
            background-repeat: no-repeat;
            background-size: contain;
            background-color: white;
            height: 325px;
            padding-top: 1rem;
            color: white;}
         
         header img{
            width: 275px;
            display: block;
            margin: 0rem auto;}
      
      
         header h2{ 
            margin: 1rem 1.1rem 1rem 1.7rem;
            padding-top: 47px;
            font-size: 1.1em;
            color: white;}
            
            }
















      @media screen and (min-width: 60rem) {

         
   header h1{
   font-size: 3.4rem;}

   section {
       width: 60rem; 
       /* use the width you prefer for the design, but no wider than the min-width set above */

       margin: 3rem auto;
       /* adjust vertical spacing with the first value, 
       center the section tag with auto left/right margins */
   }
   
   header{
      
      background-size: cover;
      background-position-x: center;
   background-position-y: -31rem;}

   header h2{ 
      margin: 1rem 2rem 1rem 12rem;
      padding-top: 47px;
      font-size: 20px;
      color: white;}

   .flex-container {
       display: flex;  
       /* creates two columns */

       column-gap: 1rem;
       /* space between the columns */
   }

   .flex-container picture, 
   .flex-container > p, 
   .flex-container > div {
       flex-basis: 50%; 
       /* makes each column 50% wide */

       /* > means "direct child of", meaning first level descendent: child, not grandchildren */ 
       /* see https://www.w3schools.com/cssref/css_ref_combinators.php */
   }

   .when .flex-container,
   .how .flex-container {
   /*  select "every other" section tag,
       ex: first and third */


       flex-direction: row-reverse;
       /* swap left and right columns */
   }
   

   } /* always comment the closing media query tag
        so you don't delete it by accident */