title: Why the textarea doesn't have the same font size with input text?
body: <p>Can someone tell me why &quot;message&quot; which is a textarea has different font size than &quot;full name&quot; and &quot;email&quot; which are input, however they have the same class name? how can i make it have the same font size? thank you in advance!</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: grey;
  }
  
  .form-control {
        width: 40%;
        padding: 10px;
        margin: 10px;
        border-radius: 1.5em;
        font-size: 1.1em;
        background-color: $white;
        border: none;
        color: black;
        resize: none;
        &amp;:focus {
          outline: 0;
        }
      }
      button {
        padding: .5em .75em;
        margin: 10px;
        font-size: 1.1em;
        border-radius: 1.5em;
        background-color: $white;
        border: none;
        outline: 0;
        color: black;
        &amp;:hover {
          color: $purple;
        }
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>        &lt;form action="https://formspree.io/f/" method="POST"&gt;
            &lt;input
              name="name"
              type="text"
              class="form-control"
              placeholder="Full name"
              required
            /&gt;
            &lt;br /&gt;
            &lt;input
              name="_replyto"
              type="email"
              class="form-control"
              placeholder="Email"
              required
            /&gt;
            &lt;br /&gt;
            &lt;textarea name="message" class="form-control" placeholder="Message" rows="5" required&gt;&lt;/textarea&gt;
            &lt;br /&gt;
            &lt;button type="submit"&gt;Send&lt;/button&gt;
          &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>