main.css

/* If you want to see what's going on, uncomment the bit below */
.parallax__group {
  transition: transform 500ms;
  /* transform: translate3d(700px, 0, -800px) rotateY(30deg); */
}

.parallax {
  /*
   * If height > 100vh, content gets clipped by the viewport.
   * If height < 100vh, you get scrollbars and whitespace in the viewport.
   */
  height: 100vh;

  overflow-x: hidden;
  overflow-y: auto;
  perspective: 300px;
}

.parallax__group {
  transform-style: preserve-3d;
}

.parallax__group:nth-child(1) {
  color: white;
}

.parallax__layer--foreground {
  transform: translateZ(0px);
  transform-style: preserve-3d;
}

.parallax__group:nth-child(1) .parallax__layer--foreground {
  padding-bottom: 5rem;
}

.parallax__layer--background {
  position: absolute;
  top: -100vh;
  right: 0;
  bottom: -50vh;
  left: 0;
  transform: translateZ(-300px) scaleX(2);
}

.snazzy-background {
  background: repeating-linear-gradient(
    -45deg,
    rgb(0,175,0) 0,
    rgb(0,175,0) 25px,
    rgb(0,0,0) 30px,
    rgb(0,0,0) 55px,
    rgb(0,175,0) 60px) top left;
}

html, body {
  font-family: sans-serif;
  overflow: hidden;
}

h1 {
  font-size: 64pt;
  text-align: center;
}

main {
  background-color: rgb(255,255,0);
  margin-block: 5rem;
  margin-inline: max(3rem, 80% - 65rem);
  padding: 1rem 3rem;
  color: black;
}

main p {
  font-size: 21pt;
}

footer div {
  background-color: rgb(125,100,0);
  height: 50vh;
  color: white;
  padding: 1rem;
}

footer p {
  font-size: 18pt;
  font-style: italic;
  margin: 1rem auto 5rem auto;
  padding: 0 3rem;
  text-align: end;
}