/* <main> is a flex column, where automatic side margins shrink the box to its content; the width keeps it filled. */
  #forgotPassword {
    box-sizing: content-box;
    width: calc(100% - 2em);
    margin: 0em auto;
  }
  
  #forgotPassword > h2 {
    margin-bottom: 1rem;
  }
  
  /* In the grid of the section, this margin would be added to the one of the heading, instead of merging with it. */
  #forgotPassword > .infoParagraph {
    margin-top: 0em;
  }
  
  #forgotPassword > a {
    display: block;
    text-align: center;
    padding-top: 1em;
  }
  
  #forgotPassword form > label:first-of-type {
    margin-top: 1rem;
  }

  @media screen and (min-width: 450px) {
    #userFullName {
      display: flex;
      flex-flow: row nowrap;
      align-items: flex-start;
      justify-content: space-between;
    }
    
    #userFullName > label {
      margin: 0em;
      flex: 0 0 calc(100%/2 - 0.25em);
    }
    
    #userFullName input {
      width: 100%;
    }
  }
  
  @media screen and (min-width: 750px) {
    #forgotPassword {
      max-width: 25em;
    }
  }