/** The about page talks about the background of the author

*/

about

margin-top: 50px
margin-bottom: 50px

/** The container that holds the profile-picture
  */
#about-image
  display: block
  width: 200px
  height: 200px
  margin: auto

  /** The image element that loads the profile-picture
    *
    * border-radius - Ensures the profile-picture is placed in a circle and
    * not a box
    */
  #profile-picture
    width: 100%
    height: 100%
    border-radius: 50%

/** The container that hold the header and the 'about' content
  */
#about-content
  width: 100%
  max-width: 1012px
  margin: 50px auto 50px auto

  /** The intro statement of the author
    */
  #about-intro
    font-size: 34px
    font-weight: 600
    color: $color-custom-primary

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

#about

  /** Resizing the image container
    */
  #about-image
    width: 180px
    height: 180px

  /** Resizing the intro statement's font
    */
  #about-content
    #about-intro
      font-size: 30px

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

#about
    /** Making sure the profile picture according to the width and
      * height percentages
      */
    #profile-picture
      width: 90%
      height: 90%
      border-radius: 50%