/**
 * App component
 *
 * `src/styles/components/App.styl`
 *
 * Styles for the `App` component (the top most component) the in demo page.
 *
 * Weight: -70
 *
 * Styleguide: App
 */

/**
 * .App
 *
 * The Parent class name for the component.
 *
 * Styleguide: App.1
 */
.App
  font-size: 1.4rem
  text-align: center

  header
    background-color: $main-color
    color: #fff
    padding: 70px $block-spacing

    h1
      font-size: 2.2rem
      letter-spacing: 1px

      img
        margin-right: 2em
        vertical-align: middle
        width: 200px

  nav
    border-bottom: 1px solid rgba(#000, $border-opacity)

    ul
      margin: $block-spacing

      li
        display: inline-block
        margin: 0 0.8em

  p.welcome
    font-size: 1.7rem
    font-weight: bold
    margin: 20px

  footer
    background-color: $main-color
    box-sizing: border-box
    color: #fff
    padding: $block-spacing
    position: absolute
    bottom: 0
    width: 100%