/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
body {
    margin: 0;
    padding: 0;
}
   
.layer1 {
  background-image: url("background_ditter.png"); 
  background-size: 20%;
  width: 100%;
  margin: 0;
  padding: 0;
  
 height: 5000px;

  
}

.layer1_parallax1 {
  background-image: url("parallax_back_ditter_dark.png");
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: rgba(0,0,0,0);
   height: 5000px;
   background-size: 35%;
}

.layer1_parallax2 {
  background-image: url("parallax_front.png");
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: rgba(0,0,0,0);
  background-size: 35%;
  height: 5000px;
}

.layer1_parallax_side {
  background-image: url("parallax_ditter_side.png");
  width: 100%;
  margin-left: -55%;
  padding: 0;
  background-color: rgba(0,0,0,0);
  background-size: 35%;
  height: 5000px;
  background-repeat: repeat-y;
  transform: scaleX(-1);
}

.layer1_parallax_side_left {
  background-image: url("parallax_ditter_side.png");
  margin-right: -55%;
  margin-left: 55%;
  padding: 0;
  background-size: 35%;
  height: 5000px;
  background-repeat: repeat-y;
}

.layer1_parallax_side_front {
  background-image: url("parallax_ditter_side_foreground.png");
  width: 100%;
  margin-left: -900px;
  padding: 0;
  background-size: 35%;
  height: 5000px;
  background-repeat: repeat-y;
  transform: scaleX(-1);
}

.layer1_parallax_side_left_front {
  background-image: url("parallax_ditter_side_foreground.png");
  width: 100%;
  margin-left: 900px;
  padding: 0;
  background-size: 35%;
  height: 5000px;
  background-repeat: repeat-y;
}

.layer1_transition {
  background-image: url("transition_compressed.png");
  background-repeat: repeat-x;
  width: 100%;
  height: 5120px;
  margin-top:3900px;
  background-size: 30%;
}

.layer1_transition_trail {
  background-image: url("transition_trail.png");
  background-repeat: repeat-x;
  width: 100%;
  height: 5120px;
  margin-top:5600px;
  background-size: 30%;
}
/* LAYER 2 */

.layer2 {
  background-color: black;
  background-size: 20%;
  margin-top:5000px;
  height: 5800px;
  width: 100%;
  padding: 0;
}

/* pain and suffering */



.parallax {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-perspective: 300px;
    perspective: 300px;
  }

  .parallax__group {
    position: relative;
    height: 500px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
  }

  .parallax__layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  
  .parallax__group {
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
  }

  .parallax__layer--fore {
    -webkit-transform: translateZ(90px) scale(1);
    transform: translateZ(90px) scale(1);
    
    z-index: 1;
  }

  .parallax__layer--base {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    z-index: 4;
  }

  .parallax__layer--back {
    -webkit-transform: translateZ(60px) scale(1);
    transform: translateZ(60px) scale(1);
    z-index: 3;
  }

  .parallax__layer--foward {
    -webkit-transform: translateZ(160px) scale(1);
    transform: translateZ(160px) scale(1);
    z-index: 5;
}