*
{
    margin      : 0;
    padding     : 0;
    box-sizing  : border-box;
}
body
{
    font-family: 'Poppins';
    background  : #eaeef0;
    overflow    : hidden;
}
.container-loader
{
    display     : flex;
    justify-content: center;
    align-items : center;
    min-height  : 50vh;
    background  : #eaeef0;
    z-index: 10;
}
.container-text
{
    position: relative;
    padding-top: 5%;
    text-align: center;
    justify-content: center;
    align-items : center;
    z-index: 1;
}
.container-textt
{
    position: relative;
    text-align: center;
    justify-content: center;
    align-items : center;
    z-index: 1;
}

.loader
{
    position    : fixed;
    display     : flex;
    /* overflow    : hidden; */
}
.loader span
{
    position    : relative;
    width       : 250px;
    height      : 250px;
    background  : #eaeef0;
    border      : 6px solid #eaeef0;
    border-radius: 50%;
    box-shadow  :   -8px -8px 15px rgba(255, 255, 255, 1),
                    8px 8px 25px rgba(0, 0, 0, 0.15);
    overflow    : hidden;
}
.loader span::before
{
    content     : '';
    position    : absolute;
    inset       : 0;
    border-radius: 50%;
    box-shadow  :   inset 10px 10px 20px rgba(0, 0, 0, 0.5),
                    inset -5px -5px 15px rgba(255, 255, 255, 1);
}
.loader span::after
{
    content     : '';
    position    : absolute;
    inset       : 40px;
    background  : #eaeef0;
    border      : 3px solid #eaeef0;
    border-radius: 50%;
    box-shadow  :   -8px -8px 25px rgba(255, 255, 255, 1), 
                    8px 8px 25px rgba(0, 0, 0, 0.25), 
                    inset 3px 3px 10px rgba(0, 0, 0, 0.15), 
                    inset -1px -1px 15px rgba(255, 255, 255, 1);
}
.loader span i
{
    position    : absolute;
    inset       : 0;
    border-radius: 50%;
    filter      : blur(5px);
    background  : linear-gradient(#42abff, #4fd9ff, #77f4ff);
    animation   : animate 1s linear infinite;
}
@keyframes animate
{
    0%
    {
        transform: rotate(0deg);
    }
    100%
    {
        transform: rotate(360deg);
    }
}
.rocket
{
    position: absolute;
    inset   : 50px;
    z-index : 10;
    display : flex;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.rocket .fa-rocket
{
    position: absolute;
    color:#51d4ff;
    font-size: 3.5rem;
    -webkit-text-stroke: 2px #000;
    animation: animateRocket 0.2s linear infinite;
}
@keyframes animateRocket
{
    0%,100%
    {
        transform: translate(0px,0px) rotate(-45deg);
    }
    50%
    {
        transform: translate(0px,3px) rotate(-45deg);
    }
}
.fa-cloud
{
    position: absolute;
    top: calc(35px * var(--i));
    left: calc(45px * var(--i));
    font-size: 2em;
    color: #fff;
    -webkit-text-stroke: 2px #000;
    animation: animateClouds 1s linear infinite;
    animation-delay: calc(-0.5s * var(--i));
}
@keyframes animateClouds
{
    0%
    {
        transform: translateY(calc(-35 * 5px));
    }
    100%
    {
        transform: translateY(calc(35 * 5px));
    }
}