/** The contact page allows users to send personal message to the author

*/

contact

margin: 50px auto 0px auto

/** The contact page header
  */
#contact-page-header
  font-size: 34px
  font-weight: 600
  text-align: center
  color: $color-custom-primary

/** The contact page message
  */
#contact-page-message
  margin: 20px auto 20px auto
  font-size: 16px
  text-align: center

/** The contact form for users to fill up
  */
#contact-form
  margin: 60px auto 50px
  max-width: 500px

  /** The fiels in the contact form
    */
  .form-field
    .field-name
      color: $color-custom-primary

    /** The input handlers for the text entered by the users
      *
      * resize - Ensures that the textarea is not resizable
      */
    .input-handler, .textarea-handler
      width: 100%
      padding: 10px
      resize: none
      border: 1px solid $color-custom-secondary

      /** The input fields when in focus
        */
      &:focus
        outline: none
        border-width: 2px
        border-color: $color-custom-primary

    /** The textarea is generally larger for messages
      */
    .textarea-handler
      height: 250px

  /** The div that wraps the send button
    */
  .submit-wrap
    text-align: center

    /** The send button for users to send the message to mail
      */
    [type="submit"]
      width: 33%
      margin: 0
      padding: 0
      outline: none
      font-size: 20px
      background: $color-custom-secondary
      color: white

      /** The send button when the cursor hovers over it
        */
      &:hover
        background: $color-custom-primary

@media screen and (max-width: 768px)

#contact

  /** Making sure there is a small gap on the left and right sides between the
    * form and the screen
    */
  #contact-form
    width: 90%
    text-align: center