@font-face {
    font-family: Delicious;
    src: url('SourceSansPro-Black.otf');
}

/* start of new styles: override original colors/positioning */
body, html {
    height: 100%;
    margin: 0;
    background: white;
    color: black;
    font-family: Delicious;
    display: flex;          /* Convert the body to a flex container */
    justify-content: center; /* Center horizontally */
    align-items: center;     /* Center vertically */
}
.centerbox {
    padding: 20px;
    text-align: center;
    font-size: 20px;
}
li {
    list-style-type: none;
}
/* end new style */

/*
body {
    text-align: center;
    font-size: 90px;
    height: 100%;
    background: black;
    overflow: hidden;
    color: white;
    font-family: Delicious;
}
*/

.svg-logo {
    width: 80%;
}

.fade-bkg {
    animation: fade-bkg 1s;
    animation-fill-mode: forwards;

    -moz-animation: fade-bkg 1s; /* Firefox */
    -moz-animation-fill-mode: forwards;

    -webkit-animation: fade-bkg 1s; /* Safari and Chrome */
    -webkit-animation-fill-mode: forwards;

    -o-animation: fade-bkg 1s; /* Opera */
    -o-animation-fill-mode: forwards;
}

.fade-logo {
    animation: fadein 3s;
    animation-fill-mode: forwards;

    -moz-animation: fadein 3s; /* Firefox */
    -moz-animation-fill-mode: forwards;

    -webkit-animation: fadein 3s; /* Safari and Chrome */
    -webkit-animation-fill-mode: forwards;

    -o-animation: fadein 3s; /* Opera */
    -o-animation-fill-mode: forwards;
}

.letter {
    position: relative;
    top: -webkit-calc(50% - 60px);
    top: calc(50% - 60px);
    text-shadow: 0px 0px 13px white;
    font-family: Delicious;
    opacity: 0;
}

.letter:nth-child(1) {
    animation: fadein 12s;
    animation-fill-mode: forwards;

    -moz-animation: fadein 12s; /* Firefox */
    -moz-animation-fill-mode: forwards;

    -webkit-animation: fadein 12s; /* Safari and Chrome */
    -webkit-animation-fill-mode: forwards;

    -o-animation: fadein 12s; /* Opera */
    -o-animation-fill-mode: forwards;
}

.letter:nth-child(2) {
    animation: fadein 12s 400ms;
    animation-fill-mode: forwards;

    -moz-animation: fadein 12s 400ms; /* Firefox */
    -moz-animation-fill-mode: forwards;

    -webkit-animation: fadein 12s 400ms; /* Safari and Chrome */
    -webkit-animation-fill-mode: forwards;

    -o-animation: fadein 12s 400ms; /* Opera */
    -o-animation-fill-mode: forwards;
}

.letter:nth-child(3) {
    animation: fadein 12s 800ms;
    animation-fill-mode: forwards;

    -moz-animation: fadein 12s 800ms; /* Firefox */
    -moz-animation-fill-mode: forwards;

    -webkit-animation: fadein 12s 800ms; /* Safari and Chrome */
    -webkit-animation-fill-mode: forwards;

    -o-animation: fadein 12s 800ms; /* Opera */
    -o-animation-fill-mode: forwards;
}

.letter:nth-child(4) {
    animation: fadein 12s 1200ms;
    animation-fill-mode: forwards;

    -moz-animation: fadein 12s 1200ms; /* Firefox */
    -moz-animation-fill-mode: forwards;

    -webkit-animation: fadein 12s 1200ms; /* Safari and Chrome */
    -webkit-animation-fill-mode: forwards;

    -o-animation: fadein 12s 1200ms; /* Opera */
    -o-animation-fill-mode: forwards;
}

/* fadein */

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-moz-keyframes fadein {
    /* Firefox */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadein {
    /* Safari and Chrome */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-o-keyframes fadein {
    /* Opera */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* fade-bkgnd */

@keyframes fade-bkg {
    /* Safari and Chrome */
    from {
        background: black;
    }
    to {
        background: white;
    }
}

@-webkit-keyframes fade-bkg {
    /* Safari and Chrome */
    from {
        background: black;
    }
    to {
        background: white;
    }
}