html, body {
    padding: 0;
    background-color: black;
    overflow-x: hidden;
    overflow-y: hidden;
}

#parallax {
    perspective: 100px;
    height: 100vh;
    padding-top: 5em;
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
}

.parallaxLayer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
        
    width: 100%;
}
.parallaxImage {
    position: absolute;
    bottom: 0;

    width: 100%;
}

.parallaxLayer1 {transform: translateZ(-100px) scale(2)}
.parallaxLayer2 {transform: translateZ(-75px) scale(1.75)}
.parallaxLayer3 {transform: translateZ(-50px) scale(1.5)}
.parallaxLayer4 {transform: translateZ(-25px) scale(1.25)}
.parallaxLayer5 {transform: translateZ(-0px)  scale(1)}

#content {
    background-color: black;
    color: white;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 1000px;

    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 1000px) {
    #parallax {
        padding-top: 0em;
        top:-25%;
    }
    .parallaxLayer {
        left: -20%;
        width: auto;
    }
    .parallaxImage {
        width: auto;
    }
}