body {
    margin: 0;
    padding: 0;
}

.splash {
    background: #d9e0e7;
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .splash.dark {
        background: #121212;
    }

@keyframes ellipsis-jump {
    0% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-8px);
    }

    60%, 100% {
        transform: translateY(0);
    }
}

.loading-text {
    color: #333;
    font-size: 28px;
    font-family: sans-serif;
    text-align: center;
    text-shadow: 0.1em 0.1em 0.2em #777;
    text-transform: uppercase;
}

    .loading-text .ellipsis {
        display: inline-block;
        width: 5px;
        height: 5px;
    }

        .loading-text .ellipsis:first-of-type {
            animation: ellipsis-jump 1.5s 0s ease-in-out infinite normal;
        }

        .loading-text .ellipsis:nth-of-type(2) {
            animation: ellipsis-jump 1.5s 0.2s ease-in-out infinite normal;
        }

        .loading-text .ellipsis:nth-of-type(3) {
            animation: ellipsis-jump 1.5s 0.4s ease-in-out infinite normal;
        }

.dark .loading-text {
    color: white;
    text-shadow: 0.1em 0.1em 0.2em black;
}