#reveal {
    font-size: 22px;
}

#reveal span {
    font-size: 22px;
    opacity: 0;
    animation: fadeIn 2s forwards;
    animation-delay: calc(2s * var(--index));
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#reveal span:nth-child(1) {
    --index: 0;
}

#reveal span:nth-child(2) {
    --index: 1;
}

#reveal span:nth-child(3) {
    --index: 2;
}

#reveal span:nth-child(4) {
    --index: 3;
}

#reveal span:nth-child(5) {
    --index: 4;
}

#reveal span:nth-child(6) {
    --index: 5;
}

#reveal span:nth-child(7) {
    --index: 6;
}

#reveal span:nth-child(8) {
    --index: 7;
}

#reveal span:nth-child(9) {
    --index: 8;
}

#reveal span:nth-child(10) {
    --index: 9;
}

#reveal span:nth-child(11) {
    --index: 10;
}

#reveal span:nth-child(12) {
    --index: 11;
}

#reveal span:nth-child(13) {
    --index: 12;
}

#reveal span:nth-child(14) {
    --index: 13;
}

#reveal span:nth-child(15) {
    --index: 14;
}

#reveal span:nth-child(16) {
    --index: 15;
}

#reveal span:nth-child(17) {
    --index: 16;
}

#reveal span:nth-child(18) {
    --index: 17;
}

#reveal span:nth-child(19) {
    --index: 18;
}

#reveal span:nth-child(20) {
    --index: 19;
}

#reveal span:nth-child(21) {
    --index: 20;
}

#reveal span:nth-child(22) {
    --index: 21;
}

#reveal span:nth-child(23) {
    --index: 22;
}

#reveal span:nth-child(24) {
    --index: 23;
}

#reveal span:nth-child(25) {
    --index: 24;
}

#reveal span:nth-child(26) {
    --index: 25;
}

#reveal span:nth-child(27) {
    --index: 26;
}

#reveal span:nth-child(28) {
    --index: 27;
}

#reveal span:nth-child(29) {
    --index: 28;
}

#reveal span:nth-child(30) {
    --index: 29;
}

/* You can continue adding specific nth-child selectors if you want to control more spans */