* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: 'Helvetica', 'arial';
    background:#f2f1f6;
  }
  

  .contact-form {
    margin: 2em auto 02em auto;
    width: 90%;
  }
  
  .contact-form label {
    padding: 0.3em 0.0em;
    font-size: 1.3em;
    display: inline-block;
  }
  
  .contact-form input{
    padding: 0.5em 0.5em;
    outline: none;
    border: none;
    border-bottom: 4px solid #ccc;
    background:white;
    margin-bottom: 20px;
    width: 100%;
    font-size: 1.2em;
    
  }

  .messagesent{
      padding: 0em;
      text-align: center;
      font-size: 1.3em;
  }

  .contact-form input:focus {
    background: white;
    border-bottom: 4px solid #FF9300;
  }
  
  .contact-form textarea {
    padding: 0.5em 0.5em;
    font-family: 'Helvetica', 'arial';
    font-size: 1.2em;
    outline: none;
    border: none;
    resize: none;
    border-bottom: 4px solid #ccc;
    background: white;
    width: 100%;
    
  } 
  
  .contact-form textarea:focus {
    border-bottom: 4px solid #FF9300;
    background:white;
  }
  
  .contact-form button {
    font-size: 1.5em;
    font-weight: bold;
    width: 100%;
    margin-top: 2em;
    border: none;
    padding: 0.8em 1em;
    background-color: #FF9300;
    color: #fff;
    cursor: pointer;
    transition: 0.2s ease-in-out;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
  
  .contact-form button:hover {
    background-color: #FF9300;
  }
  
  @media all and (min-width: 760px) {
    .contact-form {
      width: 80%;
    }
  }
  
  @media all and (min-width: 1080px) {
    .contact-form {
      width: 70%;
    }
}