//Edit these $farColor: ffe4c7; $nearColor: darken(cyan,30%); $layer: 7; //make sure it is +1 the ammount of layer divs in the html $perspective: 1;

.bg {

position:absolute;
height:100%;
width:100%;
top:0px;
z-index:0;
background-color:$farColor;

}

.layer {

position:fixed;
top:0px;
margin:auto;
width:100%;
z-index:100;
min-height:400px;
top: 0; left: 0; right: 0; bottom: 0;
background-position: top center;
background-repeat: no-repeat;

}

.parallax {

height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
perspective: #{$perspective + px};

}

.parallax-group {

position: relative;
height: 100vh;
transform-style: preserve-3d;

}

@for $i from 1 to $layer {

.parallax-group div:nth-child(#{$i}) {

  //figure out best mixing math, this isn't true to the starting colors, doesnt scale that well
  $mixedColor: mix($nearColor, $farColor, $i*15);
  $randOffset: random(300)+px;
  $zDepth: ($layer - $i)/0.5;

  background-color:$farColor;
  margin-top:#{300*($i+1) + px};
  background-color:$mixedColor;
  transform: translateZ(#{-($zDepth) + px}) scale(#{1 + (-($zDepth) * -1) / $perspective});

  &:before {
    content:"";
    width:100%;
    height:200px;
    position:absolute;
    bottom:100%;
    left:0;
    background-image: linear-gradient(135deg, transparent 66%, $mixedColor 66.01%),
                      linear-gradient(45deg, $mixedColor 34%, transparent 34.01%);
    background-position: $randOffset 0px;
    background-size: 200px 100%;
    background-repeat:repeat-x;
  }
}

} //loop over

///Demo specific styling

.content {

position:relative;
background-color:transparent;
font-family:"Arial";
letter-spacing:10px;
text-transform:uppercase;
line-height:40px;
z-index:10;
width:100%;
font-size:15px;
text-align:center;
color:white;
margin-top:1000px;
$zDepth: (1)/0.5;
transform: translateZ(#{-($zDepth) + px}) scale(#{1 + (-($zDepth) * -1) / $perspective});

}

.fill {

height:80%; //?

}