#word-animation {
    position: fixed;
    top: 40%;
    left: 0;
    height: 100%;
    width: 100%;
    font-family: "Palanquin", sans-serif;
    text-align: center;
    letter-spacing: -0.12rem;
    margin: auto;
    animation: eff5 1s 4.3s forwards;
}

#word-animation span {
    display: inline-block;
    position: relative;
    top: -10rem;
    color: #898989;
    font-size: 4.5rem;
    opacity: 0;
    transform: rotateY(180deg);
    animation: eff1 1s forwards, eff2 0.3s 2s forwards, eff3 0.2s 3s forwards;
}

#word-animation span:nth-child(2) {
    top: 10rem;
    animation: eff1 1s 0.2s forwards, eff2 0.3s 2.1s forwards, eff3 0.2s 3.1s forwards;
}

#word-animation span:nth-child(3) {
    top: -10rem;
    animation: eff1 1s 0.6s forwards, eff2 0.5s 2.2s forwards, eff3 0.2s 3.2s forwards;
}

#word-animation span:nth-child(4) {
    top: 10rem;
    animation: eff1 1s 0.4s forwards, eff2 0.5s 2.3s forwards, eff3 0.2s 3.3s forwards;
}

#word-animation span:nth-child(5) {
    top: 10rem;
    animation: eff1 1s 0.8s forwards, eff2 0.5s 2.4s forwards, eff3 0.2s 3.4s forwards;
}

#word-animation span:nth-child(6) {
    top: -10rem;
    animation: eff1 1s 1s forwards, eff2 0.5s 2.5s forwards, eff3 0.2s 3.5s forwards;
}

#word-animation span:nth-child(7) {
    top: 0;
    left: -5rem;
    color: #c02c24;
    font-size: 2.4rem;
    letter-spacing: -0.12rem;
    opacity: 0;
    transform: rotateY(0deg);
    animation: eff4 0.4s 3.8s forwards;
}

#word-animation .foo {
    display: inline;
    visibility: hidden;
    font-size: 4.5rem;
}

/* ANIMATION */

@keyframes eff1 {
    100% {
        top: 0;
        opacity: 1;
    }
}

@keyframes eff2 {
    from {
        transform: rotateY(180deg);
    }
    to {
        transform: rotateY(0deg);
    }
}

@keyframes eff3 {
    to {
        font-size: 2.4rem;
    }
}

@keyframes eff4 {
    to {
        left: 0;
        opacity: 1;
    }
}

@keyframes eff5 {
    to {
        top: 1rem;
    }
}