#app {
  @include prefix('box-sizing', border-box);
  @include prefix('transition', padding .5s ease);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../images/coffee-cup.jpg) right center no-repeat transparent;
  background-size: cover;
  color: $offwhite;
  padding: 40px;
  overflow: hidden;

  @include tablet {
    overflow-y: auto;
  }

  @include phone {
    padding: 25px 25px;
  }

  h1, h2, h3, h4, h5, h6,
  .h1, .h2, .h3, .h4, .h5, .h6 {
    color: $white;
  }

  .home-content {
    position: absolute;
    left: 40px;
    bottom: 40px;
    width: 300px;
    opacity: 1;

    &, & * {
      @include prefix('transition', all .8s ease);
    }

    &.hidden {
      bottom: -50%;
      opacity: 0;
    }

    .home-text {
      font-size: 14px;
      line-height: 2.3;
      font-weight: 300;
      color: $offwhite;
      margin-bottom: 95px;
      letter-spacing: .5px;
    }
  }

  .code-sample {
    @include prefix('transition', all .6s ease);
    opacity: .43;
    position: absolute;
    right: 40px;
    bottom: 40px;
    &:hover {
      @include prefix('transition', all .6s ease);
      opacity: 1;
    }
    @include tablet {
      display: none;
    }
    pre code {
      font-family: $codefont;
      font-size: 12px;
      line-height: 1.6;
      .fn {
        color: #6AB5FA;
      }
      .num {
        color: #F2CB86;
      }
      .sym {
        color: #FF5D70;
      }
    }
  }

}