body{
background-color: rgb(243, 240, 240);
font-family: "itc-avant-garde-gothic-pro", sans-serif;
font-weight: 300;
font-style: normal;
}

header {
    background-color: #31602d;
    padding: 30px; 
    height: 87px; 
    color: black;
    font-size: 33px;
    font-family: "le-monde-livre-std", serif;
    font-weight: 900;
    font-style: normal;
}

h1{
   padding: 0;
   left: 12px;
  top: 11px;
  color: black;

}

h2 {
   padding: 0;
   left: 12px;
   top: -47px;
  color: black;
  font-family: "le-monde-livre-std", serif;
font-weight: 400;
font-style: normal;  
}


header span {
    position: relative;
    top: -1.175rem;
    display: inline-block;
    left: 0.25rem;
    }


    .logo {
      width: 28px;
  height: 9rem;
  margin-top: -100px;
    }
    
    .cls-1 {
      fill: white; /* Change color */
      stroke: none;
    }

    h2 {
 font-size: 22px;
 margin: 7rem 0 -3rem -50px;
 color: #31602d;

 }

h3 {
   margin: 2rem 0 0rem 15px; /* Inspect these values and adjust as
   necessary */
   padding:0;
   padding: 0;
   left: -1rem;
   top: -1rem;
   line-height: 19px;
}
 p {
   margin: 1rem 0 27px -63px;
   margin-left: -2rem;
   margin-right: 4rem;
   color: black;
   font-size: 13px;
   line-height: 19px;
 }

 figcaption{
   position: relative;
   margin-top: 0rem;
   color: black;
   font-size: 6px;
   margin-left: 0px;
 }


img {
   max-width: 100%;
   height: auto;
margin-left: -1rem;
margin-top: -4rem;
}

 span {
   margin-left: 0.5rem;
 }


 figure {
   width: 300px; /* Set figure width */
}


.navigation{
   margin: 5rem 0 0 -63px;
    margin-right: 0px;
    margin-left: -63px;
  margin-left: 1rem;
  margin-right: 5rem;
  color:#31602d;
}

.copyright{
   margin: 1rem 0 0 -63px;
 margin-left: 4rem;
 margin-right: 0rem;
 color: #31602d;
}


 main {
   margin: 1rem 0px 6rem 1.7rem;
left: -4rem;
 }   

 form {
   padding: 1rem;
 }

 fieldset {
border: 1px solid #444;
margin: -17px 0.5rem 2rem -0.5rem;
padding: 1rem;
 }

 label,input {
   display: block;
   width: 100%;
 }

 input[type="text"],
 input[type="tel"] {
margin: 0.125rem 0 1rem 0;
 }

 textarea {
   width: 100%;
   margin: 0.125rem 0 1.2rem 0;
 }

.button {
width: 5rem;
color: white;
border-radius: 0.5rem;
}

.button:hover {
   filter: opacity(0.5);
}

.align-right {
display: flex;
justify-content: end;
}

input[type="submit"]{
   margin: 0 0.55rem;
   background-color: rgb(34, 103, 34);
   position: relative;
   top: 5rem;
   left: -4rem;
}

input[type="reset"]{
   margin: 1px 0.55rem;
   background-color: rgb(139, 22, 22);
   top: 5rem;
   position: relative;
   left: -4rem;
} 

button#menu-button {
   height: 2rem;
   width: 2rem;
   display: block;
   border: none;
   background-image: url(../img/hamburger.svg); 
   background-repeat: no-repeat;
   background-size: cover;
}

#menu {
   display: none;
}

#menu.show-nav {
   display: block;
   
}  

main{
   color: black;
   font-size: 13px;
   line-height: 19px;
}


/* Add this code to the selector created in Step 3.1 above */
    
#menu.show-nav {
   position: absolute;
   z-index: 100;
   top: 0;
   right: -0.4rem;
   background-color: #31602d;
   padding: 1rem;
   width: 102%;
   margin: 0 auto;
   border: 1px solid #444;
}  

div {
   height: auto;
  top: -2rem;
  left: 3rem;
  color: white;
  margin-top: 14px;
  font-size: 29px;
  margin-bottom: -1rem;
}

#menu-button {
   position: absolute;
   right: 0.5rem;
   top: 0.5rem;
   padding: 0;
   background-color: transparent;
   z-index: 10;
}

#menu-button:hover {
   cursor: pointer;
   }

   .hide-text {
      text-indent: 100%;
      white-space: nowrap;
      overflow: hidden;
      padding: 0;
  }

  .icon a img {
   width: 2rem;
   height: auto;
}



li.icon {
   width: 100%;
   height: 1.8rem;
   margin: 1.3rem 0;  /* space apart for easier finger tapping */
 }

 li.icon a {
   display: flex;  /* place logo and span side by side */
   justify-content: start; /* align left */
   align-items: center; /* vertically align */
   
   font-family: "le-monde-livre-std", serif; /* style span text as desired */
   font-weight: bold;
   text-decoration: none;  /* remove underline */
   font-size: 1.5rem;
   margin: 0; 
   height: 1.5rem;
   color: white;
}

ul.main.navigation li.home.icon svg {
   width: 24px;
   height: 24px; 
}

ul.main.navigation li.about.icon svg {
   width: 24px; /* Adjust the width */
   height: 24px; /* Adjust the height */
}

ul.main.navigation li.brands.icon svg {
   width: 24px; /* Adjust the width */
   height: 24px; /* Adjust the height */
}

ul.main.navigation li.howtohelp.icon svg {
   width: 24px; /* Adjust the width */
   height: 24px; /* Adjust the height */
}

ul.main.navigation li.contact.icon svg {
   width: 24px; /* Adjust the width */
   height: 24px; /* Adjust the height */
}


@media only screen and (min-width: 64em) {
   button#menu-button {
       display: none;
   }

   #menu {
       display: flex;
   }
}

ol {
   margin-left: 9px;
   list-style-type: decimal;
}

ol li {
   margin-bottom: 10px;
}

ol li {
   margin-left: 0.5rem;
   position: relative;
   }