* {
  box-sizing: border-box;
}

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background: #5495f3;
}

.parallax {
  width: 100%;
  height: 100vh;
  background-color: #5495f3;
  margin: 0;
  position: relative;
}

.parallax__bkgrd--top {
  width: 100%;
  height: 50%;
  background-color: #5495f3;
  margin: 0;
  position: relative;
  background-size: 100%;
  background-position: center top;
  background-repeat: no-repeat;
}

.parallax__bkgrd--bottom {
  width: 100%;
  height: 50%;
  background-color: #5495f3;
  margin: 0;
  position: relative;
  background-size: 100%;
  background-position: center bottom;
  background-repeat: no-repeat;
}

.parallax__img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
}

.parallax__img--beach {
  top: 10%;
  left: 0;
  transform: translate(-20%, -50%);
  /* Create slower parallax movement */
  transform: translateY(calc(var(--scroll) * -0.60));
}

.parallax__img--rocks {
  top: 20%;
  left: 0;
  transform: translate(50%, -50%);
  transform: translateY(calc(var(--scroll) * -1));
}

.parallax__container {
  position: relative;
  transform: translateY(50%);
  height: 50vh;
  width: 100%;
  background: #5495f3;
  z-index: -1;
}/*# sourceMappingURL=styles_parallax.css.map */