<main>
    <div class="item">
        <div class="card"></div>
        <div class="shadow"></div>
    </div>
    <div class="item">
        <div class="card"></div>
        <div class="shadow"></div>
    </div>
    <div class="item">
        <div class="card"></div>
        <div class="shadow"></div>
    </div>
    <div class="item">
        <div class="card"></div>
        <div class="shadow"></div>
    </div>
    <div class="item">
        <div class="card"></div>
        <div class="shadow"></div>
    </div>
    <div class="item">
        <div class="card"></div>
        <div class="shadow"></div>
    </div>
    <div class="item">
        <div class="card"></div>
        <div class="shadow"></div>
    </div>
    <div class="item">
        <div class="card"></div>
        <div class="shadow"></div>
    </div>
    <div class="item">
        <div class="card"></div>
        <div class="shadow"></div>
    </div>
    <div class="item">
        <div class="card"></div>
        <div class="shadow"></div>
    </div>
   <div class="item">
        <div class="card"></div>
        <div class="shadow"></div>
    </div>
    <div class="item">
        <div class="card"></div>
        <div class="shadow"></div>
    </div>
    <div class="item">
        <div class="card"></div>
        <div class="shadow"></div>
    </div>
    <div class="item">
        <div class="card"></div>
        <div class="shadow"></div>
    </div>
    <div class="item">
        <div class="card"></div>
        <div class="shadow"></div>
    </div>
    <div class="item">
        <div class="card"></div>
        <div class="shadow"></div>
    </div>
    <div class="item">
        <div class="card"></div>
        <div class="shadow"></div>
    </div>
    <div class="item">
        <div class="card"></div>
        <div class="shadow"></div>
    </div>
    <div class="item">
        <div class="card"></div>
        <div class="shadow"></div>
    </div>
    <div class="item">
        <div class="card"></div>
        <div class="shadow"></div>
    </div>
</main>

html, body {
  background-color: #f6f4f4;
  position: absolute;
  margin: 0;
  padding: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
}

main {
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  
  /* smaller number, larger parallax effect */
  /* doesn't affect mobile/sticky */
  /* chrome needs this */
  /* small number here makes desktop safari look wonky
     but desktop chrome nice */
  perspective: 0.7px;
  perspective-origin: 50% 100%;
  
}

.item {
  transform-style: preserve-3d;
  
  perspective: 0.055px;
  perspective-origin: 50% 100%;
  
  margin-top: 8vh;
  margin-bottom: 8vh;
}

.item, .card, .shadow {
  height: 25vh;
  max-height: 200px;
}


.card {
  width: 100%;
}

.card::after, .shadow {
  width: 85vw;
  max-width: 600px;
}

.card:after {
  border-radius: 10px;
  content: "";
  display: block;
  margin-left:auto;
  margin-right:auto;
  height: 100%;
    
  background-color: white;
  box-shadow: 0px 0px 0.2vh 0px rgba(60,30,0,0.05);    
}

.shadow {
  top: 0;
  transform-origin: 50% 100%;
  
  margin-top: -100vh;
  transform: translateZ(-0.5px) scale(10) translateY(20px);
  
  margin-left:auto;
  margin-right:auto;
  
  background-color: transparent;
}

body.sticky .shadow {
  /* desktop safari gets funky if we use the position: sticky */
  position: -webkit-sticky;
}

.shadow:before {
  position: absolute;
  content: " ";
  top: 4.3vh;
  right: 4.3vh;
  bottom: 4.3vh;
  left: 4.3vh;
  z-index: -2;

  background-color: transparent;
  box-shadow: 
    2vh 2vh 4vh 3vh rgba(51,95,208,0.2),
    -2vh -2vh 4vh 3vh rgba(255,180,0,0.2);
}

document.addEventListener('DOMContentLoaded', function() {
  var sticky =
      !!getComputedStyle(document.querySelector('main')).webkitOverflowScrolling;
  if(sticky) {
      document.body.className = "sticky";
  }
});