body {
    height: 200vh !important;
}

.user-index-header-text {
    width: 80%;
    margin: auto;
    text-align: left;
    padding: 0;
}

.user-index-h1 {
    font-size: 4rem;
    text-align: left;
}

.user-index-h2 {
    font-size: 3.3rem;
    text-align: left;
}


.outlined-text {
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2.2px #8c00ff;
}

.user-index-h1,
.user-index-h2 {
    opacity: 0; /* Initially set opacity to 0 */
    transform: translateX(-20px); /* Move elements outside the viewport to the left */
    transition: opacity 0.8s ease, transform 0.8s ease; /* Apply transition effect */
}

.visible {
    opacity: 1;
    transform: translateX(0); /* Move elements back to their original position */
}