.IntroScreen {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 0;
    background: black;
    opacity: 0;
    animation: intro-screen-fade-in 3s forwards
}

.IntroScreen .letter {
    margin: auto;
    width: 70%;
    height: 100%;
    padding: 75px;
    -webkit-mask-image: url(../images/rippededges.png);
    mask-image: url(../images/rippededges.png);
    mask-repeat: no-repeat;
    mask-size: 100%;
    background-image: url(../images/oldpaper.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: rotate(-2.5deg);
    animation: intro-screen-fade-in 4s forwards;
}

.IntroScreen .letter p {
    margin: 0;
    font-size: 24px;
    font-family: 'Special Elite';
}

.IntroScreen .letter .letter_p2 {
    margin-top: 20px;
    text-decoration-line: underline;
}

.IntroScreen .letter p.controls {
    margin-top: 10px;
    font-size: 22px;
}

.IntroScreen .letter p.gotime {
    margin-top: 30px;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
}

.IntroScreen .letter .next {
    position: absolute;
    bottom: 65px;
    right: 70px;
    font-size: 20px;
}

.IntroScreen .letter span {
    opacity: 0;
}

.IntroScreen .letter span.revealed {
    opacity: 1;
}

.IntroScreen.fade-out {
    animation: intro-screen-fade-out 2s forwards;
}

.IntroScreen .letter.fade-out {
    animation: intro-screen-fade-out 2s forwards;
}

@keyframes intro-screen-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes intro-screen-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}