.title-screen {
    background: #000;
    color: #fff;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9000;
    top: 0;
    left: 0;
    overflow: hidden;
}

.title-screen.fade-out {
    opacity: 0;
}

.title-screen.hide {
    display: none;
}

.title-text {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-60%);
    text-align: center;
    z-index: 2;
}

.title-text > div {
    display: inline-block;
    font-size: 36px;
    font-size: 10vw;
    padding: 10px;
    transform: translateY(0);
}

.title-text > div:before {
    position: relative;
    opacity: 0;
}

.title-text.play > div:before {
    transition: 1s linear;
    opacity: 1;
}


.title-text .glitch:before {
    content: 'Glitch';
    animation: glitchJump3 3s linear infinite;
}

.title-text.stop .glitch:before {
    content: 'Glitch';
    /*transform: translateY(100vh);*/
}

.title-text .blob-text:before {
    content: 'Blob';
    -webkit-filter: drop-shadow(0px 0px 0px rgba(255,255,255,1));
}

.title-text.stop .blob-text:before {
    content: 'Blob';
    -webkit-filter: drop-shadow(0px 0px 0px rgba(255,255,255,1));
}

.title-text.play .blob-text:before {
    content: 'Blob';
    color: gold;
    text-shadow: 0 0 0.5vw rgba(255,215,0,1), 0 0 0.5vw rgba(255,215,0,1), 0 0 0.5vw rgba(255,215,0,1), 0 0 0.5vw rgba(255,215,0,1), 0 0 0.5vw rgba(255,215,0,1), 0 0 0.5vw rgba(255,215,0,1);
}

.title-text .play {
    display: block;
    width: 100%;
    font-size: 4vw;
    opacity: 0;
    top: 30px;
    cursor: pointer;
}


.title-text .play.show{
    animation: blink 2s linear infinite;
}

.haiku {
    text-align: center;
    height: 100%;
    width: 100%;
    z-index: 1;
    position: absolute;
    cursor: pointer;
    animation: glitchJump2 4s linear infinite;
}

.haiku:before,
.haiku:after {
    width: 100%;
    height: auto;
    top: 50%;
    position: absolute;
    transform: translateY(-50%);
    padding: 30px;
    font-size: 3vw;
    white-space: pre;
    line-height: 1.5;
}

.haiku.part-2:before {
    display: none;
}

.haiku:after {
    display: none;
}

.haiku.part-2:after {
    display: block;
}

.level-1 .haiku:before {
    content: 'Late night janitor,\A awaiting sweet thievable.\A Woah. Blobs poop monies!';
}

.level-1 .haiku:after {
    content: 'Damn these cameras! \A Night guard\'s caught me red-handed.\AKids need college, man.'
}

.level-2 .haiku:before {
    content: 'Home safe. Hi honey.\A Don\'t \'honey\' me. What is that?\A You know you can\'t lie.';
}

.level-2 .haiku:after {
    content: 'Unsurprising rage,\A so placate or die trying.\A A new pair of shoes?'
}

.level-3 .haiku:before {
    content: 'Pretty sure I\'m lost.\A I don\'t see this ending soon.\A Oh great. It\'s the fuzz.';
}

.level-3 .haiku:after {
    content: 'Doomed to rot in jail.\A But could blobs save all mankind?\A Time to make a deal.';
}

.win .haiku:before {
    content: 'Crisis averted.\A Still vague on a lot of things.\A I think that\'s okay.';
}

.win .haiku:after {
    content: 'A cold bed back home.\A Safe to say, I\'ve lost my job.\A *sigh* The end, I guess.';
}

.lose .haiku:before {
    content: 'Gosh, what a poor show.\A World\'s been taken by the glitch.\A What do I do now?';
}

.lose .haiku:after {
    content: 'Only a matter\A of time I suppose, until...';
}

.credits .haiku:before {
    content: 'Created by Jordan Watkins for js13k 2016';
}

.credits .haiku:after {
    content: 'Fin';
}

@keyframes blink {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes glitchJump2 {
    0% {
        top: 0;
        left: 0;
    }

    29.85% {
        top: 0;
        left: 0;
    }
    29.9% {
        top: 300px;
        left: 100px;
    }
    30% {
        top: 0;
        left: 0;
    }

    59.85% {
        top: 0;
        left: 0;
    }
    59.9% {
        top: -200px;
        left: -1125px;
    }
    60% {
        top: 0;
        left: 0;
    }
    69.85% {
        top: 0;
        left: 0;
    }
    69.9% {
        left: 1125px;
        top: -150px;
    }
    70% {
        top: 0;
        left: 0;
    }
    99.85% {
        top: 0;
        left: 0;
    }
    99.9% {
        top: -150px;
        left: -1125px;
    }
    100% {
        top: 0;
        left: 0;
    }
}

@keyframes glitchJump3 {
    0% {
        transform: translate3d(0, 0, 0);
    }

    29.85% {
        transform: translate3d(0, 0, 0);
    }
    29.9% {
        transform: translate3d(150%, 100%, 0);
    }
    30% {
        transform: translate3d(0, 0, 0);
    }

    59.85% {
        transform: translate3d(0, 0, 0);
        left: 0;
    }
    59.9% {

        transform: translate3d(-150%, -200%, 0);
    }
    60% {
        transform: translate3d(0, 0, 0);
    }
    69.85% {
        transform: translate3d(0, 0, 0);
    }
    69.9% {
        transform: translate3d(-150%, 100%, 0);
    }
    70% {
        transform: translate3d(0, 0, 0);
    }
    99.85% {
        transform: translate3d(0, 0, 0);
    }
    99.9% {
        transform: translate3d(-150%, -200%, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}