index.styl

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css')
@import url('https://fonts.googleapis.com/css?family=Anton')
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700,900')

space = #002f4b

body
    height 100% !important
html
    height 100% !important
.main
  height 100% !important

  Header
    background url('https://s3.amazonaws.com/chewiekie/img/chewiekie-orion-nebula.jpg') center center no-repeat 
    background-size cover
    min-height 100%
    z-index: -9999
    &:before
      content ''
      position absolute
      top 0
      right 0
      bottom 0
      left 0
      background-image: linear-gradient(to bottom right,space,black)
      opacity .6
    #universe
      z-index 0
      width 100%
      height 100%
      position absolute
    .content
      padding-top 25px
      color white
    .logo
      h3 
        display inline-block
        font-size 20px
        padding 7px 0px
        text-transform uppercase
        letter-spacing 1.2px
        font-weight 300
        font-family 'Lato', sans-serif
    .nav
      a
        color white
      svg
        font-size 22px !important
        margin-top -3px
    .hero
      font-family 'Lato', sans-serif
      padding 80px 0px
      h1 
        font-size: 400px
        color rgba(white,0.1)
        margin-bottom 0px
      h2
        color white
        font-size 35px
        margin-top -130px
      h3 
        color white 
        margin-bottom 30px
      .btn-back
        background-color space
        cursor pointer
        margin 30px 0px
        padding 12px 
        border 1px solid space
        color white
        font-weight 200
        text-transform uppercase
        font-size 13px
        border-radius 5px
        letter-spacing 1.5px
        transition all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1)
        box-shadow 0 1px 2px 0 rgba(0,0,0,0.03)
        &:hover 
          background-color rgba(space,0.8)
          transform scale(1.03)
          color rgba(white,0.8)
          text-decoration: none
      .astro 
        img 
          position fixed
          top 40%
          transform: translatey(0px);
          animation: float 6s ease-in-out infinite;


@keyframes float {
	0% {
		transform: translatey(0px);
	}
	50% {
		transform: translatey(-40px);
	}
	100% {
		transform: translatey(0px);
	}
}

@media (max-width: 676px)
  .main
    header 
      .hero
        padding 50px 0px
        h1 
          font-size 160px !important
        h2 
          font-size: 24px
          margin-top -60px
        h3 
          font-size: 19px
        .btn-back 
          font-size: 12px
      .nav-link 
        padding .5rem .5rem
      .astro 
        display none
        img 
          width: 120px
          bottom 0
          position absolute