.landing-wraper

// fallback
background-color: $blue
background-image: url($baseurl + 'assets/img/content/aboutme_small.png'), linear-gradient(to bottom right, $vivid-blue , $blue)
background-position: right
background-repeat: no-repeat
background-size: auto 100vh
height: 100vh
max-height: 100vh

.landing-content

padding: 30vh 10vw 0

.landing-page-sub-title

display: inline
padding-right: 5px

.btn-landing

display: flex
justify-content: space-between
margin: 4rem 2rem
width: 380px

.btn-outline
  color: $vivid-pink

@media screen and ( min-width: 376px )

.landing-wraper
  background-image: url($baseurl + 'assets/img/content/aboutme_large.png'), linear-gradient(to bottom right, $vivid-blue , $blue)

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

// display on ipad but not phone
.landing-page-sub-title
  display: none

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

.btn-landing
  display: none

.landing-content
  padding: 20vh 5vw 0

.mouse
  animation: intro 1s
  border: 1px solid $soft-white
  border-radius: 11px
  height: 40px
  left: 5vw
  position: absolute
  top: 75vh
  width: 20px

.scroll
  animation: finger 2.5s infinite
  background: $vivd-yellow
  border-radius: 4px
  display: block
  height: 5px
  margin: 30px auto
  width: 4px

@keyframes intro
  from
    opacity: 0
    transform: translateY(40px)

  to
    opacity: 1
    transform: translateY(0)

@keyframes finger
  from
    opacity: 0

  to
    opacity: 1
    transform: translateY(-20px)