body {
    background: rgb(249, 249, 249);
}

.center {
    font-family: "Segoe UI";
    font-weight: 300;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.hidden {
    opacity: 0;
    filter: blur(5px);
    transition: all ease-out;
}

.hidden-top {
    transform: translateY(-100%);
}
.hidden-left {
    transform: translateX(-100%);
}

.hidden.logo {
    transition-delay: 350ms;
    transition-duration: 1200ms;
}
.hidden.coming-soon {
    transition-delay: 1600ms;
    transition-duration: 750ms;
}

.shown {
    opacity: 1;
    filter: blur(0);
}

.shown.logo {
    transform: translateY(0);
}
.shown.coming-soon {
    transform: translateX(0);
}