@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

 *,
 *::before,
 *::after {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: "poppins", "sans-serif";
 }

 main {
     height: 100vh;
     /* width: 100%; */
     overflow-x: hidden;
     perspective: 10px;
 }

 .container {
     position: relative;
     height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
     transform-style: preserve-3d;
     z-index: -1;
 }

 .container img {
     position: absolute;
     height: 100vh;
     width: 100%;
     object-fit: cover;
     z-index: -1;
 }

 #background {
     transform: translateZ(-39px) scale(5);
 }

 #foreground {
     transform: translateZ(-20px) scale(3);
 }

 .container h1 {
     position: absolute;
     top: 3rem;
     color: #fff;
     left: 50%;
     transform: translateX(-50%);
     text-transform: uppercase;
     font-size: 10rem;
     font-weight: 700;
     text-shadow: 0 0 2px black;
 }

 section {
     background: rgb(45, 45, 45);
     color: #fff;
     padding: 5rem 0px;
 }

 section h2 {
     font-size: 5rem;
     padding: 0 10rem;
 }

 .text {
     font-size: 1.5rem;
     padding: 0 10rem;
     margin: 5rem 0;
 }

 .bg1 {
     background-image: url(sport-1.jpg);
 }

 .bg2 {
     background-image: url(sport-2.jpg);
 }

 .bg3 {
     background-image: url(sport-3.jpg);
 }

 .box {
     height: 500px;
     width: 100%;
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
     position: relative;
 }

 .box h4 {
     font-size: 3.5rem;
     color: black;
     font-weight: 600;
     text-transform: uppercase;
     background-color: white;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     padding: 0 20px;
 }