styles.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "poppins", "sans-serif";
}
@font-face {
    font-family: "poppins";
    src: url(./Poppins-Bold.ttf);
}
#wrapper{
    height:100vh;
    overflow-y: auto;
    overflow-x: hidden;
    perspective: 20px;
}
.container{
    position: relative;
    /* also there is no need to position the container to relative 
       because it will take the body as the nearest positioned ancestor */
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
    z-index: -6; 
     /* Yes it is important to give same z-index value to the container otherwise the other information
     will be placed benethe the background and foreground images and when we scroll down,
     all the text will be scrolled benethe the image and image overlap the text inside section */
}
.background{
    transform: translateZ(-25px) scale(3);
    /* translateZ -> used to set the distance of the image from eyes in z-axis direction 
    scale-> is used bcz when anything goes far from eyes its size seems small, 
            thats why to increase the size of image we scale it */
}
.foreground{
    transform: translateZ(-10px) scale(1.5);
}
.background, .foreground{
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: -6;
}
h1{
    position: absolute;
    top: 5rem;
    font-size: 10rem;
    letter-spacing: 4px;
    color: white;
    text-shadow: 0 0 10px rgba(0,0,0,0.3);

}
section{
    background-color: rgb(45, 45, 45);
    color: white;
    padding: 5rem 0;
}
.secHeading{
    font-size: 5rem;
    padding: 0 10rem;
    
}
.text{
    font-size: 1.5rem;
    padding: 0 10rem;
    margin: 5rem 0;
}
.bg{
    position: relative;
    width: 100%;
    background-attachment: fixed;
    height: 500px;
    background-size: cover;
    background-position: center;
}
.description{
    position: absolute;
    background-color: white;
    padding: 0.5rem 2.5rem;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    color: black;
    font-size: 3.5rem;
    font-weight: 600;
}
.bg1{
    background-image: url(sport-1.jpg);
}
.bg2{
    background-image: url(sport-2.jpg);
}
.bg3{
    background-image: url(sport-3.jpg);
}