<section id="contact-section" class="section gap">
  <div class="bg" data-anchor-target="#contact-section"
  data-bottom-top="transform: translate3d(0px, -150px, 0px);"
  data-top-bottom="transform: translate3d(0px, 150px, 0px);"
  ></div>
  <div class="overlay-wrapper">
    <div class="fade-in">
      <div class="center">
        <h1 class="section-heading">Get In Touch</h1>
        <span class="divider center"></span>
        <p class="contact-description">Have a sweet project in mind or just want to say hi? Feel free to send me a message!</p>
      </div>
      <div class="contact-wrapper">
        <form class="form-wrapper" autocomplete="off" method="post" action="https://formspree.io/brittany.chiang@gmail.com">
          <div class="input-wrapper">
            <label for="name" class="input-label">Name</label>
            <input type="text" name="name" class="contact-input" id="name" required>
          </div>
          <div class="input-wrapper">
            <label for="email" class="input-label">Email</label>
            <input type="email" name="_replyto" class="contact-input" id="email" required>
          </div>
          <div class="input-wrapper">
            <label for="subject" class="input-label">Subject</label>
            <input type="text" name="_subject" class="contact-input" id="subject" required>
          </div>
          <div class="input-wrapper">
            <label for="message" class="input-label" id="message-label">Message</label>
            <textarea name="message" class="contact-input autoExpand" id="message" required></textarea>
          </div>
          <button type="submit" name="submit" class="message-btn">
            <span>Send Message</span>
          </button>
        </form>
      </div>
    </div>
  </div>
</section>
