body  {margin: 0; height: 100%;}
/* for my layout design, I have choosen to use grid layout*/

/*container for home page*/
.grid-container-2 {width: 100vw; height: 100vh; font-family: Arial, Verdana, sans-serif;
font-weight: bold; font-size: 16px;
display: grid; grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 120px 50px 400px 70px 640px 60px 640px 60px 70px;
grid-gap: 30px; padding: 10px;
box-sizing: border-box;}
.grid-container-2 div {padding: 10px; border: 3px solid #000000;}

/* container for our garden page*/
.grid-container-3 {width: 100vw; height: 100vh; font-family: Arial, Verdana, sans-serif;
font-weight: bold; font-size: 16px;
display: grid; grid-template-columns: 1fr 1fr 1fr;
grid-template-rows:120px 50px 400px 70px 500px  70px;
grid-gap: 30px; padding: 10px;
box-sizing: border-box;}
.grid-container-3 div {padding: 10px; border: 3px solid #000000;}





/* container for contact page*/
.container {width: 100vw; height: 100vh; font-family: Arial, Verdana, sans-serif;
font-weight: bold; font-size: 16px;
display: grid; grid-template-columns: 1fr 1fr 1fr;
grid-template-rows:120px 50px 400px 70px 400px  70px;
grid-gap: 30px; padding: 10px;
box-sizing: border-box;}
.container div {padding: 10px; border: 3px solid #000000;}

/* container for my Philosophy page*/
.grid-container {width: 100vw; height: 100vh; font-family: Arial, Verdana, sans-serif;
font-weight: bold; font-size: 16px;
display: grid; grid-template-columns: 1fr 1fr 1fr;
grid-template-rows:120px 50px 400px 70px 680px  70px;
grid-gap: 30px; padding: 10px;
box-sizing: border-box;}
.grid-container div {padding: 10px; border: 3px solid #000000;}

.header a {text-decoration: none; color: #efa536; }
.header  {grid-column-start: 1; grid-column-end: 4;
background-color: #6c7c59;  font-size: 1.5em; text-align: center; text-shadow: 1px 1px 1px #ffff9c;}


.nav  {grid-column-start: 1; grid-column-end: 4; font-size: 1.5em; font-weight: bold; text-align: center;
  background-color: #81864a;}

.nav a {text-decoration: none; color: #180606;}
 .heroimage3 {grid-column-start: 1; grid-column-end: 4;}
 .title {grid-column-start: 1; grid-column-end: 4;}
  .title2 {grid-column-start: 1; grid-column-end: 4;}
.heroimage2 {grid-column-start: 1; grid-column-end: 4;}
.box1  {grid-column-start: 1; grid-column-end: 4;}
.box2  {grid-column-start: 1; grid-column-end: 4;}
.videoimage{grid-column-start: 1; grid-column-end: 4;}
 .feet {grid-column-start: 1; grid-column-end: 4;}
 .heroimage {grid-column-start: 1; grid-column-end: 4;}
 .heroimage3 {background-image: url(IMG_0666.jpg); background-repeat: no-repeat; background-position: center; background-color: #6c7c59;}

   .title { background-color: #81864a; font-size: 1.0em; font-weight: bold; text-align: center; color: #efa536; text-shadow: 2px 2px 2px #180606; }
    .title2 { background-color: #81864a; font-size: 2em; font-weight: bold; text-align: center; color: #efa536; text-shadow: 2px 2px 2px #180606; }
   .heroimage2 {background-image: url(IMG_0688.jpg); background-repeat: no-repeat; background-position: center; background-color: #6c7c59;}


   .formlabel {background-color: #eaeaea;}

       label, textarea {display:block; margin-top: 20px;}


       input, textarea {display: block; margin-bottom: 20px}
       .contactus {background-color: #eaeaea; }
       .map {background-color: #eaeaea;}


  .feet {text-align: center; font-style: italic; font-size: 1em; background-color: #6c7c59; color: #000000; }




      .image3 {background-image: url(image0.png); background-repeat: no-repeat; background-position: center; background-color: #6c7c59;}

        .image4 {background-image: url(image15.png); background-repeat: no-repeat; background-position: center;  background-color: #6c7c59;}

          .image5 {background-image: url(image23.png); background-repeat: no-repeat; background-position: center;  background-color: #6c7c59;}

            .image6 {background-image: url(image20.png); background-repeat: no-repeat; background-position: center;  background-color: #6c7c59;}

    .image2 {background-image: url(image18.png); background-repeat: no-repeat; background-position: center;  background-color: #6c7c59;}

      .image1 {background-image: url(image24.png); background-repeat: no-repeat; background-position: center;  background-color: #6c7c59;}


    .heroimage {background-image: url(IMG_0656.jpg); background-repeat: no-repeat; background-position: center; background-color: #6c7c59;}
    .heroimage2 {background-image: url(IMG_0688.jpg); background-repeat: no-repeat; background-position: center; background-color: #6c7c59;}
    .heroimage3 {background-image: url(IMG_0666.jpg); background-repeat: no-repeat; background-position: center; background-color: #6c7c59;}
    .box2 {background-image: url(IMG_4593.jpg); background-repeat: no-repeat; background-position: center; background-color: #6c7c59;}






/* I have not sure which is better, to post pictures in html or css, but I am still experimenting*/

      .Gardeneggs{  background-color: #81864a; color: #efa536; font-size: 1.5em; text-align: center; text-shadow: 1px 1px 1px #180606;}

      .Taroleaves { background-color: #81864a; color: #efa536; font-size: 1.5em; text-align: center; text-shadow: 1px 1px 1px #180606;}

      .Turkeyberries {background-color: #81864a; color: #efa536; font-size: 1.5em; text-align: center; text-shadow: 1px 1px 1px #180606;}

      .Juteleaves {background-color: #81864a; color: #efa536; font-size: 1.5em; text-align: center; text-shadow: 1px 1px 1px #180606;}

      .Waterleaves {background-color: #81864a; color: #efa536; font-size: 1.5em; text-align: center; text-shadow: 1px 1px 1px #180606;}

      .cassavaleaves {background-color: #81864a; color: #efa536; font-size: 1.5em; text-align: center; text-shadow: 1px 1px 1px #180606;}





/*my attempt to add pseudo class distinguished by different colors according to actions user make
to both nav and header.*/

      nav a:link {color:#000000; }
      nav a:visited {color:#360fde; }
      nav a:hover {color:#da0fde; }

      header a:link {color:#efa536 }
      header a:visited {color:#360fde; }
      header a:hover {color:#da0fde;}
      /* here is me trying to float my picture which i don't have photoshop to size it down to float to the right*/

      #sustainable {float: right; margin: 0 0 5px 5px; border: 1px solid #000000;}
/* this cell phone design has been pain for me but I am still trying*/
      @media (max-width:480px)
      { .container {font-size: 15px; text-align: center; flex-direction: column; display: inline-block;}
       .grid-container-3, .grid-container, .grid-container-2 {font-size: 15px; text-align: center; grid-gap: 1px; padding: 4px;}
    .Gardeneggs,  .Taroleaves,   .Turkeyberries, .Juteleaves,   .Waterleaves, .cassavaleaves{font-size: 1em;}
        .videoimage { position: relative; width: 94%; display: block; padding: 0; overflow: hidden;}
nav {font-size: 13px;} .header{font-size: .9em;} .title {font-size: .5em;} .title2 {font-size: 1em;}
p {font-size: .7em}
   input, label, textarea {display: grid; grid-template-rows: auto; grid-template-columns: 1em 1fr; grid-gap:.5em; font-family: Arial; width: 15%; min-width: 20em; padding: .5em;}
 .heroimage3 {display: none;}}