body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

/* start welcome animation */
body.welcome {
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

.welcome .splash {
    height: 0px;
    padding: 0px;
    border: 130em solid #039be5;
    position: fixed;
    left: 50%;
    top: 100%;
    display: block;
    box-sizing: initial;
    overflow: hidden;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: puff 0.5s 1.8s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, borderRadius 0.2s 2.3s linear forwards;
    z-index: 999999999;
}

.welcome #welcome {
    background: #311b92;
    width: 56px;
    height: 56px;
    position: absolute;
    left: 50%;
    top: 50%;
    overflow: hidden;
    opacity: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    animation: init 0.5s 0.2s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards, moveDown 1s 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards, moveUp 1s 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, materia 0.5s 2.7s cubic-bezier(0.86, 0, 0.07, 1) forwards, hide 2s 2.9s ease forwards;
    background: #311b92 url('/assets/images/favicon.png') no-repeat center center;
    z-index: 9999999999;
}

/* moveIn */
.welcome header  {
    opacity: 0;
    animation: moveIn 2s 3.1s ease forwards;
}

@keyframes init {
    0% {
        width: 0px;
        height: 0px;
    }

    100% {
        width: 56px;
        height: 56px;
        margin-top: 0px;
        opacity: 1;
    }
}

@keyframes puff {
    0% {
        top: 100%;
        height: 0px;
        padding: 0px;
    }

    100% {
        top: 50%;
        height: 100%;
        padding: 0px 100%;
    }
}

@keyframes borderRadius {
    0% {
        border-radius: 50%;
    }

    99% {
        border-radius: 0px;
   
    }

    100% {
        border-radius: 0px;
        pointer-events: none;
        display: none;
        z-index:-999;
    }
}

@keyframes moveDown {
    0% {
        top: 50%;
    }

    50% {
        top: 40%;
    }

    100% {
        top: 100%;
    }
}

@keyframes moveUp {
    0% {
        background: #311b92;
        background: #311b92 url('/assets/images/favicon.png') no-repeat center center;
        top: 100%;
    }

    50% {
        top: 40%;
    }

    100% {
        top: 50%;
        background: #039be5;
        background: #039be5 url('/assets/images/favicon.png') no-repeat center center;
    }
}

@keyframes materia {
    0% {
        background: #039be5;
        background: #039be5 url('/assets/images/favicon.png') no-repeat center center;
    }

    50% {
        background: #039be5;
        background: #039be5 url('/assets/images/favicon.png') no-repeat center center;
        top: 26px;
    }

    100% {
        background: #311b92;
        background: #311b92 url('/assets/images/favicon.png') no-repeat center center;
        width: 100%;
        height: 64px;
        border-radius: 0px;
        top: 26px;
    }
}

@keyframes moveIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes hide {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        top: -26px;
    }
}