/* Parallax base styles
  --------------------------------------------- */

.parallax {
  font-size: 200%;
}

.parallax {
  height: 500px; /* fallback for older browsers */
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-perspective: 300px;
  perspective: 300px;
}

.parallax__group {
  position: relative;
  height: 500px; /* fallback for older browsers */
  height: 100vh;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.parallax__layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

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

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

.parallax__layer--back {
  -webkit-transform: translateZ(-300px) scale(2);
  transform: translateZ(-300px) scale(2);
  z-index: 3;
  width: 105%;
}

.parallax__layer--deep {
  -webkit-transform: translateZ(-600px) scale(3);
  transform: translateZ(-600px) scale(3);
  z-index: 2;
}

.parallax__group {
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
}

/* style the groups
  --------------------------------------------- */

#group1 {
  z-index: 5; /* slide over group 2 */
}
#group1 .parallax__layer--base {
  background: #555;
}

#group2 {
  z-index: 3; /* slide under groups 1 and 3 */
}

#group3 {
  z-index: 4; /* slide over group 2 and 4 */
}
#group3 .parallax__layer--base {
  background: #44a7c4;
}

#group4 {
  z-index: 2; /* slide under group 3 and 5 */
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #001a33 100%);
}

/* misc
  --------------------------------------------- */
.demo__info {
  position: absolute;
  z-index: 100;
  bottom: 1vh;
  top: auto;
  font-size: 80%;
  text-align: center;
  color: #fff;
  width: 100%;

  font-size: 1vmax;
  font-family: "Raleway", sans-serif;
  font-weight: 500;
  color: #fff;

  padding-top: 1vh;
  padding-bottom: 1vh;

  /* Add the blur effect */
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

a:link {
  color: #888;
}

a:visited {
  color: #888;
}

a:hover {
  color: #666;
}