.welcome {
    width: 100vw;
    min-height: 300px;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(var(--main-color));
}

.w_text {
    width: 100%;
    height: 100%;
    padding: 5px;
    box-sizing: border-box;
}
.w_text p{
    text-align: center;
}
.w_text span {
    margin: auto;
    text-align: center;
    color: hsl(0 0% 100% /0.2);
    text-transform: capitalize;
    font-size: xx-large;
    background-clip: text;
    background-repeat: no-repeat;
    background-image: linear-gradient(90deg, #fff,#fff);
    background-size: 0% 100%;
    animation: reveal linear forwards;
    animation-timeline: view(y);
    animation-range-start: cover 20vh;
    animation-range-end: cover 80vh;

}

@-webkit-keyframes reveal {
    to {
        background-size: 100% 100%;
    }
}
@keyframes reveal {
    to {
        background-size: 100% 100%;
    }
}