body {
    background-color: rgba(0,0,0);
    color: rgba(255,255,255);
    margin: 0;
    overflow: hidden;
}

#content {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

#sub-title {
    color: rgba(255,255,255);
    font-family: 'Courier New', Courier, monospace;
    font-size: large;
    margin: 0.5em;
    padding: 0.5em;
    position: relative;
    text-align: center;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    white-space: pre-wrap;
}

#sub-title span.fade-out {
    animation: sub-title-fade-out;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes sub-title-fade-out {
    from { color: rgba(255,255,255); }
    to { color: rgba(0,0,0); }
}

#title {
    color: rgba(0,0,0);
    font-family: 'Courier New', Courier, monospace;
    font-size: larger;
    font-weight: bold;
    margin: 0.5em;
    padding: 0.5em;
    position: relative;
    text-align: center;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    white-space: pre-wrap;
}

#title span.fade-in {
    animation: title-fade-in;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes title-fade-in {
    0% { color: rgba(0,0,0); }
    10% { color: rgba(128,0,0); }
    20% { color: rgba(0,0,0); }
    100% { color: rgba(255,255,255); }
}