header
  .overlay
    .parallax
      h1 Awesome
        span Parallax Scrolling
      .one
      .two
      .three
      .four
      .five
main
  .container
    p Sapiente nihil quidem tempora unde nobis eum corrupti veniam perferendis numquam, minima officia beatae quisquam quas cumque voluptatem facilis! Tenetur, praesentium corporis rerum repellendus vero temporibus quia voluptates corrupti, aliquam.
    a( href='https://www.w3schools.com/cssref/pr_mix-blend-mode.asp' target='blank') CSS mix-blend-mode
    pre
      | wrapper { 
      |   background-color: ... ;
      | }
      | 
      | text { 
      |   color: ... ;
      |   mix-blend-mode: ... ; 
      | }
    p Sint sequi consequuntur eaque, harum, est tempora dolorem ullam perferendis quia laudantium porro magni necessitatibus sit dicta quidem. Sint autem quidem recusandae, ipsam, dolorem saepe blanditiis dolor. Aliquid, voluptate, at.
    p Tempore placeat veritatis ad excepturi, quasi, consequatur fuga. Corporis suscipit at aut quaerat nostrum maxime amet ipsum illo qui. Voluptate aperiam nostrum natus voluptatem modi, hic aliquid tempora quisquam, itaque.
footer
  p Copyright &copy 2019 by 
    a(href='https://twitter.com/andrejsharapov' target='_blank') @andrejsharapov

$dark: #192a2e;
$light: lightblue;
$color: #c6d9d3;

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 62.5%;
}

::-webkit-scrollbar {
  width: 0;
}

header {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: $color;

  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    h1 {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 3;
      margin: 0;
      text-transform: uppercase;
      text-align: center;
      font-size: 9rem;
      text-shadow: 25px -15px rgba($dark, 0.04);
      color: darken($dark, 3%);
      mix-blend-mode: overlay;
      // mix-blend-mode: screen;
      // mix-blend-mode: luminosity;

      span {
        // position: relative;
        margin-top: -2em;
        padding-top: 0.5em;
        display: block;
        letter-spacing: 5px;
        font-size: 1.25rem;
        
        // &::before {
        //   position: absolute;
        //   top: 0;
        //   left: 50%;
        //   transform: translateX(-50%);
        //   content:'';
        //   width: 100px;          
        //   border-top: 4px dashed;
        // }
      }
    }
  }
  .parallax {
    position: relative;
    width: 100%;
    height: 100%;

    div {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-position: 0 50%;
      background-repeat: no-repeat;
      background-size: 100%;
    }
    .one {
      background-image: url("https://raw.githubusercontent.com/joshuaward/codepen-images/master/mountains-1.svg");
      z-index: 4;
    }
    .two {
      background-image: url("https://raw.githubusercontent.com/joshuaward/codepen-images/master/mountains-2.svg");
      z-index: 3;
    }
    .three {
      background-image: url("https://raw.githubusercontent.com/joshuaward/codepen-images/master/mountains-3.svg");
      z-index: 2;
    }
    .four {
      background-image: url("https://raw.githubusercontent.com/joshuaward/codepen-images/master/mountains-4.svg");
      z-index: 1;
    }
    .five {
      background-image: url("https://raw.githubusercontent.com/joshuaward/codepen-images/master/mountains-5.svg");
      z-index: 0;
    }
  }
}

main {
  position: relative;
  margin-bottom: 15vh;
  padding: 2em 4em;
  min-height: 85vh;
  background-color: lighten($light, 15%);
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.08);

  .container {
    font-size: 1rem;
    color: $dark;
    
    pre {
      padding: 1em;
      border-radius: 0.25em;
      background-color: rgba($dark, 0.05);
    }
    
    a {
      text-decoration: none;
      font-size: 2rem;
      font-weight: 500;
      border-bottom: 2px dashed;
      color: $dark;
    }
  }
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  display: flex;
  min-height: 15vh;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  background-color: $dark;
  color: $color;
  
  a {
    padding-bottom: .25em;
    text-decoration: none;
    border-bottom: 1px dashed $color;
    color: $color;
  }
}

// for heading

$(window).scroll(function() {
  const 
    a = $(this).scrollTop(),
    b = 800;
  $("h1").css({
    backgroundPosition: "center " + a / 2 + "px" 
  });
  $(".parallax").css({ 
    top: a / 1.6 + "px", 
    opacity: 1 - a / b 
  });
});

// parallax scrolling

document.addEventListener("scroll", () => {
  const 
    top = window.pageYOffset,
    one = document.querySelector(".one"),
    two = document.querySelector(".two"),
    three = document.querySelector(".three"),
    four = document.querySelector(".four"),
    five = document.querySelector(".five");

  one.style.bottom = -(top * 0.1) + "px";
  two.style.bottom = -(top * 0.2) + "px";
  three.style.bottom = -(top * 0.3) + "px";
  four.style.bottom = -(top * 0.4) + "px";
  five.style.bottom = -(top * 0.5) + "px";
});

/*
// mouse dependency

const currentX = '';
const currentY = '';
const movementConstant = 0.015;
$(document).mousemove(function(e) {
  if (currentX == '') currentX = e.pageX;
  const xdiff = e.pageX - currentX;
  currentX = e.pageX;
  if (currentY == '') currentY = e.pageY;
  const ydiff = e.pageY - currentY;
  currentY = e.pageY;
$('.parallax div').each(function(i, el) {
    const movement = (i + 1) * (xdiff * movementConstant);
    const movementy = (i + 1) * (ydiff * movementConstant);
    const newX = $(el).position().left + movement;
    const newY = $(el).position().top + movementy;
    $(el).css('left', newX + 'px');
    $(el).css('top', newY + 'px');
  });
});
*/