style.css

*{
    margin:0px;
    padding:0px;
    box-sizing:border-box;
}
#wrapper{
    height:100vh;
    overflow-x:hidden;
    overflow-y:auto;
    perspective:10px;
}
.container{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    height:100%;
    transform-style:preserve-3d;
    z-index:-1;
}
.background{
    transform:translateZ(-40px) scale(6);
}
.foreground{
    transform:translateZ(-20px)scale(3);
}
.background,.foreground{
    position:absolute;
    height:100%;
    width:100%;
    z-index:-1;
    object-fit:cover;
}

h1{
    position:absolute;
    top:5rem;
    font-size:10rem;
    color:white;
    letter-spacing:4px;
    text-shadow:0 0 10px rgba(0,0,0,0.3);
}
section{
    background-color:rgb(45,45,45);
    color:white;
    padding:5rem 0;
}
.bg1{
    background-image:url(static/sport-1.jpg)
}
.bg2{
    background-image:url(static/sport-2.jpg)
}
.bg3{
    background-image:url(static/sport-3.jpg)
}
.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;
}
.desc{
position:absolute;
left:50%;
top:50%;
background-color:white;
padding:0.5rem 2.5rem;
font-size:3.5rem;
font-weight:600;
color:black;
transform:translate(-50%,-50%);
}