/** The most important thing about the footer is it is stuck to the bottom of

* the screen even when the content is less than the height of the screen
*
* position - Needed to make the footer stick to the bottom
* right, bottom, left - Set to 0 to not move the footer if the content is less
* z-index - Set to place the footer behind the mobile-header-extended-background
*/

site-footer

position: absolute
right: 0
bottom: 0
left: 0
width: 100%
z-index: -1

/** As the name suggests, it separates the footer from the rest of the page
  *
  * margin - Set to auto to center the hr in the page
  */
#footer-demarcation
  max-width: 1012px
  width: 30%
  margin: auto
  border-top: 1px solid $color-light-grey

/** Holds the footer navigation and fine print
  */
#footer-nav-container
  width: 50%
  margin: 30px auto 10px auto
  text-align: center

  /** Holds the the footer navigation
    */
  #footer-nav-menu-icons-container
    width: 100%
    height: 50px

    /** The styles for the individual footer icon
      */
    .footer-menu-icon
      display: inline-block
      width: 50px
      height: 50px
      margin: 0 5px 0 5px
      fill: $color-custom-secondary

      &:hover
        fill: $color-dark-grey

  /** Holds the fine print text
    */
  #fine-print
    margin-top: 30px
    margin-bottom: 30px

    /** The styles for the fine print test
      */
    .fint-print-text
      margin: auto
      font-size: 14px
      text-align: center

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

#site-footer

  /** Changing the length of the separator with respect to the screen for
    * mobile devices
    */
  #footer-demarcation
    width: 90%

  /** Changing the width of the footer's body
    */
  #footer-nav-container
    width: 90%