.scenery
  .stars
    - for(i=0; i<100; i++)
      .star
  .planet.planet1
  .planet.planet2
  .planet.planet3
  .girl
    .head
    .body
    .legs
  .title
    h1
      span 4
      .square
        .light.light1
        .light.light2
        .light.light3
        .light.light4
        .shadow.shadow1
        .shadow.shadow2
        ul.stairs1
          - for(i=0; i<12; i++)
            li
        ul.stairs2
          - for(i=0; i<11; i++)
            li
        ul.stairs3
          - for(i=0; i<10; i++)
            li
        ul.stairs4
          - for(i=0; i<11; i++)
            li
      span 4
  .message
    h2 Oops! Looks like you got lost
  
  .action
    button Take me back

@import "compass/reset"
@import "compass/css3"
@import url('https://fonts.googleapis.com/css?family=Poppins')

$count: 100
$shadow: #ff9c61
$light: #fedbae
$gradient1: #2a1f6f
$gradient2: #ae3082
$squareSize: 150px

@keyframes shining
  0%
    opacity: 1
  100%
    opacity: 0.2

body
  background-color: #482472
  font-family: Poppins

//---------------------------
// GENERAL SCENERY
//---------------------------
.scenery
  position: absolute
  top: 50%
  left: 50%
  width: 1000px
  height: 618px
  display: flex
  flex-direction: column
  align-items: center
  justify-content: center
  transform: translate(-50%, -50%)
  overflow: hidden
  border-radius: 5px
  color: #fff
  +background-image(linear-gradient($gradient1, $gradient2))
  +box-shadow(rgba(0,0,0,0.8) 0px 0px 100px)

//---------------------------
// STARS
//---------------------------
.star
  position: absolute
  z-index: 1
  background-color: #fff
  animation-name: shining
  animation-timing-function: ease
  animation-direction: alternate
  animation-iteration-count: infinite
  +box-shadow(#fff 0px 0px 5px)
  +border-radius(200px)
  
@for $i from 1 to $count
  $size: random(3)+0px
  .star:nth-child(#{$i})
    width: $size
    height: $size
    bottom: random(618)+0px
    left: random(1000)+0px
    animation-duration: random(4) / random(3) + 0s

//---------------------------
// TEXT
//---------------------------
.title
  position: relative
  z-index: 50
  h1
    font-size: 15rem
    font-weight: bold
    span
      vertical-align: middle
      margin: 0 30px

.message
  margin-top: 50px
  h2
    font-size: 1.8rem

.action
  margin-top: 30px
  button
    padding: 10px 20px
    font-family: Poppins
    font-size: 1.2rem
    color: #fff
    border: 2px solid $shadow
    background-color: $shadow
    border-radius: 50px
    +transition(all .2s ease)
    box-shadow: 0px 0px 15px $shadow
    &:hover
      cursor: pointer
      background-color: transparent

//---------------------------
// FIGURE
//---------------------------   
.square
  width: $squareSize
  height: $squareSize
  display: inline-block
  position: relative
  vertical-align: middle
  left: -30px
  +transform(scale(1.1) rotate(45deg))
  > *
    position: absolute
  .light
    box-shadow: 0px 0px 10px $light
    background-color: $light
  .light1, .light3
    width: $squareSize / 10 
    height: $squareSize - $squareSize / 10
    +transform(skew(0deg, 45deg))
  .light2, .light4
    width: $squareSize - $squareSize / 5
    height: $squareSize / 10 
    +transform(skew(45deg))
  .light1
    z-index: 10
    top: $squareSize / 20 - 2px
    left: $squareSize / 10
  .light3
    z-index: 2
    top: $squareSize / 20
    right: $squareSize / 10
  .light2
    top: 0
    left: $squareSize / 10 + ($squareSize / 10)/2
  .light4
    bottom: 0
    right: $squareSize / 10 + ($squareSize / 10)/2

  .shadow
    background-color: $shadow
    box-shadow: 0px 0px 10px $shadow
  .shadow1
    bottom: $squareSize / 20
    right: 0
    width: $squareSize / 10 
    height: $squareSize - $squareSize / 5
    +transform(skew(0deg, -45deg))
  .shadow2
    z-index: 3
    top: $squareSize / 10
    left: $squareSize / 10 + ($squareSize / 10)/2
    width: $squareSize - $squareSize / 5
    height: $squareSize / 10
    +transform(skew(-45deg))
  
  .stairs1, .stairs2, .stairs3, .stairs4
    li
      position: relative
      width: $squareSize/20
      height: $squareSize/20
      background-color: $light
      box-shadow: 0px 0px 10px $light
      +transform(rotate(45deg))
  .stairs1, .stairs2
    li
      &::before
        content: ''
        position: absolute
        left: 0
        width: $squareSize/20
        height: 13px
        +background-image(linear-gradient(left, $light, $shadow))
        box-shadow: 0px 0px 10px $light
    
  .stairs1
    top: 1px
    left: 11px
    width: 0px
    height: $squareSize
    li
      margin-bottom: 3px
      &::before
        top: 100%
        
  .stairs2
    z-index: 10
    bottom: 19px
    left: 3px
    width: $squareSize
    height: 0px
    display: flex
    li
      margin-right: 3.5px
      &:last-child
        &::before
          background: $light
      &::before
        bottom: 100%
  
  .stairs3
    bottom: -32px
    right: 34px
    width: 0px
    height: $squareSize
    z-index: 10
    li
      margin-bottom: 3.5px

  .stairs4
    top: -4px
    left: 16px
    width: $squareSize
    height: 0px
    display: flex
    li
      margin-right: 3.5px

//---------------------------
// PLANETS
//---------------------------     
.planet
  position: absolute
  z-index: 10
  width: 90px
  height: 90px
  border-radius: 50%
  box-sizing: border-box
  &::before, &::after
    content: ''
    position: absolute
    z-index: 1
    top: 50%
    left: 50%
    border-radius: 50%
    transform: translate(-50%, -50%)
  &::before
    width: 70px
    height: 70px
  &::after
    width: 60px
    height: 60px
.planet1
  box-shadow: 0px 0px 30px #a3358c
  bottom: 260px
  left: 50px
  border: 5px solid #a3358c
  background-color: #cf3684
  &::before
    background-color: #fd8f5d
  &::after
    background-color: #ffdf70

.planet2
  box-shadow: 0px 0px 30px #1383df
  +transform(scale(0.8))
  bottom: 40px
  right: 80px 
  border: 5px solid #1383df
  background-color: #08abf3
  &::before
    background-color: #11c1f1
  &::after
    background-color: #22e5f1

.planet3
  box-shadow: 0px 0px 30px #7a7afe
  +transform(scale(0.6))
  top: 20px
  right: 30px 
  border: 5px solid #7a7afe
  background-color: #9a82ff
  &::before
    background-color: #b588ff
  &::after
    background-color: #d491ff

//---------------------------
// GIRL
//---------------------------
.girl
  position: absolute
  z-index: 99
  width: 12px
  height: 40px
  top: 130px
  left: 460px
  .head
    position: relative
    z-index: 10
    width: 10px
    height: 10px
    box-sizing: border-box
    background-color: #fff
    border-left: 3px solid #000
    border-radius: 5px
    +transform(rotate(-20deg))
    &::before
      content: ''
      position: absolute
      left: -16px
      top: 0px
      width: 0px
      height: 0px
      display: block
      border-right: 15px solid #fff
      border-top: 5px solid transparent
      border-bottom: 4px solid transparent
  .body
    position: absolute
    top: 7px
    left: -2px
    width: 0px
    height: 0px
    box-sizing: border-box
    border-bottom: 20px solid #fff
    border-left: 8px solid transparent
    border-right: 8px solid transparent
    border-radius: 7px

  .legs
    position: absolute
    bottom: 5px
    left: 3px
    width: 3px
    height: 10px
    border-left: 2px solid #fff
    border-right: 2px solid #fff