#rotate-words {
    max-width: 400px;
    margin: auto;
    font-size: 2.2em;
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    float: left;
    vertical-align: middle;
    position: relative;
    margin-top: 20px;
    margin-left: 160px;
    color: #fff;
}

#rotate-words span {
    display: block;
    height: 50px;
    font-size: .7em;
    text-transform: lowercase;
    opacity: .8;
    font-family: 'Rubik', sans-serif;
}

#rotate-words div {
    position: absolute;
    opacity: 0;
    overflow: hidden;
    left: 0vw;
    width: 80vw;
    line-height: 1.2em;
    animation: rotate-word 32s linear infinite 0s;
    letter-spacing: 6px;
}

@keyframes rotate-word {
    0% {
        opacity: 0;
        transform: translateX(0);
        filter: blur(10px);
        transform: scale(1.2)
    }

    3% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0px);
        transform: scale(.9)
    }

    12% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0px);
        transform: scale(1)
    }

    16% {
        opacity: 0;
        transform: translateX(0);
        filter: blur(10px);
        transform: scale(1.2)
    }

    80% {
        opacity: 0
    }

    100% {
        opacity: 0
    }
}

#rotate-words div:nth-child(2) {
    animation-delay: 4s
}

#rotate-words div:nth-child(3) {
    animation-delay: 8s
}

#rotate-words div:nth-child(4) {
    animation-delay: 12s
}

#rotate-words div:nth-child(5) {
    animation-delay: 16s
}

#rotate-words div:nth-child(6) {
    animation-delay: 20s
}

#rotate-words div:nth-child(7) {
    animation-delay: 24s
}

#rotate-words div:nth-child(8) {
    animation-delay: 28s
}

@keyframes author {
    0% {
        opacity: 0;
        transform: translateY(100px);
        filter: blur(10px);
        transform: scaleY(2)
    }

    20% {
        opacity: 0;
        transform: translateY(200px);
        filter: blur(10px);
        transform: scaleY(2)
    }

    30% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0px);
        transform: scaleY(1)
    }

    90% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0px);
        transform: scaleY(.9)
    }

    100% {
        opacity: 0;
        transform: translateY(0);
        filter: blur(10px);
        transform: scale(2)
    }
}