* {
    margin: 0;
}
html {
  scroll-behavior: smooth;
}

.first_page {
    height: 100svh;
    width: 100%;
    background-color: red;
    position: sticky;
    top: 0;
    z-index: 0;
}
.layers-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.corners {
    height: 100svh;
    width: 100%;
    position: absolute;
    z-index: 10;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 50% , rgba(0, 0, 0, 0.7));
}
.cursor-effect {
    pointer-events: none;
    transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.pro {
    pointer-events: none;
    transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.layer1 {
    position: absolute;
    width: 130%;
    height: 130;
    top: -20%;
    left: -15%;
    z-index: 0;
}
.fog1 {
    z-index: 1;
    width: 100vw;
    height: 15vh;
    top: 25vh;
    left: 0;
    object-fit: cover;
}
.layer2 {
    position: absolute;
    object-fit: cover;
    z-index: 2;
    width: 130%;
    height: 300px;
    top: calc(50% - 280px);
    left: -15%;
}
.layer3 {
    position: absolute;
    z-index: 3;
    width: 130%;
    height: 850px;
    top: calc(50% - 450px);
    left: -15%;
}
.layer4 {
    position: absolute;
    z-index: 4;
    object-fit: fill;
    height: 400px;
    width: 100%;
    left: 3%;
    top: calc(50% - 100px);
    filter:contrast(200%);
}
.layer5 {
    position: absolute;
    z-index: 4;
    object-fit: fill;
    height: 90%;
    width: 25%;
    left : -2%;
    top: 8%;
}
.layer6 {
    position: absolute;
    z-index: 4;
    object-fit: fill;
    height: 30%;
    width: 20%;
    right : -2%;
    top: 50%;
}