form {
    padding: 0.5em;
  }
  
  ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  form li + li {
    margin-top: 1em;
  }
  
  label {
      /* Uniform size & alignment */
      display: inline-block;
      width: 90px;
      text-align: right;
    }
  
  input,
  textarea {
    /* To make sure that all text fields have the same font settings
         By default, textareas have a monospace font */
    font: 1em 'Roboto', sans-serif;
  
    /* Uniform text field size */
    width: 400px;
    box-sizing: border-box;
  }
  
  textarea {
    /* Align multiline text fields with their labels */
    vertical-align: top;
  
    /* Provide space to type some text */
    height: 8em;
  }
  
  .button {
      /* Align buttons with the text fields */
      padding-left: 90px; /* same size as the label elements */
    }
  
  button {
      /* This extra margin represent roughly the same space as the space
         between the labels and their text fields */
      margin-left: 0.5em;
    }
  
  /* Media Query for Small Displays */
  @media screen and (max-width: 600px) {
      label {
        display: block;
        width: 100%;
        text-align: left;
      }
    
      input,
      textarea {
        width: 100%;
      }
    
      .button {
        padding-left: 0;
      }
    
      button {
        margin-left: 0;
      }
    }