/* .principal {
    position: relative;
    top: -168px;
    left: 0px;
    width: 40px;
    height: 40px;
    transform: rotate(0deg);
} */

.astro {    
    mask-image: radial-gradient(circle, black 70%, rgba(0, 0, 0, 0.5) 0%);
    -webkit-mask-image: radial-gradient(circle, black 71%, rgba(0, 0, 0, 0) 0%);
    position: relative;
    top: 0px;
    left: 0px;
    width: 525px;
    height: 525px;
    transform: rotate(0deg);
    transform: scale(0.4);
}

.astro .fundo {
    position: relative;
    top: 0px;
    left: 0px;
    width: 525px;
    height: 525px;
    transform: rotate(0deg);
    flex-shrink: 0;
    border-radius: 525px;
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
    overflow: hidden;
}

/*CORPO*/
.astro .corpo {
    position: absolute;
    top: 263px;
    left: 263px;
}

.astro .corpo .mochila {
    position: absolute;
    top: -122px;
    left: -159px;
    width: 318px;
    height: 289px;
    transform: rotate(0deg);
    flex-shrink: 0;
    border-radius: 36px;
    background: #FFF;
}

.astro .corpo .tronco {
    position: absolute;
    top: 20px;
    left: -109px;
    width: 218px;
    height: 248px;
    transform: rotate(0deg);
    flex-shrink: 0;
    border-radius: 15px;
    background: #EDEDED;
}

.astro .corpo .logo {
    position: absolute;
    top: 40px;
    left: -65px;
    transform: scale(0.12);
}

.propulsor-esquerdo {
    position: absolute;
    top: 160px;
    left: -75px;
    width: 100px;
    height: 100px;
    shape-outside: polygon(0% 100%, 100% 100%, 50% 0%);
    clip-path: polygon(0% 100%, 100% 100%, 50% 0%);
    background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    transform: rotate(30deg);
    display: block;
}
.propulsor-direito {
    position: absolute;
    top: 160px;
    left: 292px;
    width: 100px;
    height: 100px;
    shape-outside: polygon(0% 100%, 100% 100%, 50% 0%);
    clip-path: polygon(0% 100%, 100% 100%, 50% 0%);
    background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
    transform: rotate(330deg);
    display: block;
}

/*CAPACETE*/
.astro .capacete {
    position: absolute;
    top: 263px;
    left: 263px;
}

.astro .capacete .sombra {
    position: absolute;
    top: -133px;
    left: -118px;
    width: 236px;
    height: 154px;
    transform: rotate(0deg);
    flex-shrink: 0;
    border-radius: 150px 150px 70px 70px;
    background: #6B6B6B;
}

.astro .capacete .capa {
    position: absolute;
    top: -235px;
    left: -135px;
    width: 270px;
    height: 248px;
    transform: rotate(0deg);
    flex-shrink: 0;
    border-radius: 150px 150px 70px 70px;
    background: #EDEDED;
}

.astro .capacete .escutador {
    position: absolute;
    top: -100px;
    left: -150px;
    width: 300px;
    height: 55px;
    transform: rotate(0deg);
    flex-shrink: 0;
    border-radius: 15px;
    background: #8E8E8E;
    transition: top 0.25s, left 0.25s;
}

/*VISEIRA*/
.astro .capacete .viseira {
    position: absolute;
    top: -190px;
    left: -110px;
    width: 220px;
    height: 150px;
    transform: rotate(0deg);
    flex-shrink: 0;
    border-radius: 120px 120px 60px 60px;
    background: #242424;
    transition: top 0.25s, left 0.25s;
}

.astro .capacete .brilho {
    position: absolute;
    top: -150px;
    left: -50px;
    width: 21.607px;
    height: 21.854px;
    transform: rotate(0deg);
    flex-shrink: 0;
    border-radius: 36px;
    background: #BDBDBD;
}

.astro .capacete .brilhom {
    position: absolute;
    top: -160px;
    left: -20px;
    width: 55.143px;
    height: 21.798px;
    transform: rotate(-2.591deg);
    flex-shrink: 0;
    border-radius: 36px;
    background: #BDBDBD;
}

/*BRAÇO ESQUERDO*/
.astro .be {
    position: absolute;
    top: 280px;
    left: 150px;
    transform: rotate(0deg);
}

.astro .be .bracoe {
    position: absolute;
    top: 0px;
    left: -31px;
    width: 62px;
    height: 113px;
    transform: rotate(0deg);
    flex-shrink: 0;
    border-radius: 15px;
    background: #C7C7C7;
    transition: top 0.25s, left 0.25s;
}

.astro .be .dobrae {
    position: absolute;
    top: 95px;
    left: 0px;
    width: 62px;
    height: 20px;
    transform: rotate(0deg);
    flex-shrink: 0;
    border-radius: 50px;
    background: #6B6B6B;
    transition: top 0.25s, left 0.25s;
}

.astro .be .antee {
    position: absolute;
    top: 95px;
    left: 0px;
    width: 62px;
    height: 113px;
    transform: rotate(0deg);
    flex-shrink: 0;
    border-radius: 15px;
    background: #D9D9D9;
    /* transition: top 0.25s, left 0.25s; */
}

/*MÃO ESQUERDA*/
.astro .be .me {
    position: absolute;
    top: 76px;
    left: 31px;
    transform: rotate(0deg);
    transition: top 0.25s, left 0.25s;
}

.astro .be .me .palmae {
    position: absolute;
    top: 0px;
    left: -25px;
    width: 49px;
    height: 78px;
    transform: rotate(90deg);
    flex-shrink: 0;
    border-radius: 19px;
    background: #AAA;
    transition: top 0.25s, left 0.25s;
}

.astro .be .me .polegare {
    position: absolute;
    top: 37px;
    left: 27px;
    width: 21px;
    height: 60px;
    transform: rotate(0deg);
    flex-shrink: 0;
    border-radius: 15px 15px 7px 15px;
    background: #9A9A9A;
    transition: top 0.25s, left 0.25s;
}

.astro .be .me .indicadore {
    position: absolute;
    top: 37px;
    left: 8px;
    width: 20px;
    height: 85px;
    transform: rotate(0deg);
    flex-shrink: 0;
    border-radius: 15px;
    background: #9A9A9A;
    transition: top 0.25s, left 0.25s;
}

.astro .be .me .meioe {
    position: absolute;
    top: 37px;
    left: -12px;
    width: 20px;
    height: 95px;
    transform: rotate(0deg);
    flex-shrink: 0;
    border-radius: 15px;
    background: #9A9A9A;
    transition: top 0.25s, left 0.25s;
}

.astro .be .me .anulare {
    position: absolute;
    top: 37px;
    left: -32px;
    width: 20px;
    height: 85px;
    transform: rotate(0deg);
    flex-shrink: 0;
    border-radius: 15px;
    background: #9A9A9A;
    transition: top 0.25s, left 0.25s;
}

.astro .be .me .minimoe {
    position: absolute;
    top: 37px;
    left: -51px;
    width: 20px;
    height: 70px;
    transform: rotate(0deg);
    flex-shrink: 0;
    border-radius: 15px;
    background: #9A9A9A;
    transition: top 0.25s, left 0.25s;
}

/*BRAÇO DIREITO*/
.astro .bd {
    position: absolute;
    top: 280px;
    right: 150px;
    transform: rotate(0deg);
}

.astro .bd .bracod {
    position: absolute;
    top: 0px;
    left: -31px;
    width: 62px;
    height: 113px;
    transform: rotate(0deg);
    flex-shrink: 0;
    border-radius: 15px;
    background: #C7C7C7;
    transition: top 0.25s, left 0.25s;
}

.astro .bd .dobrad {
    position: absolute;
    top: 95px;
    left: 0px;
    width: 62px;
    height: 20px;
    transform: rotate(0deg);
    flex-shrink: 0;
    border-radius: 50px;
    background: #6B6B6B;
    transition: top 0.25s, left 0.25s;
}

.astro .bd .anted {
    position: absolute;
    top: 95px;
    left: 0px;
    width: 62px;
    height: 113px;
    transform: rotate(0deg);
    flex-shrink: 0;
    border-radius: 15px;
    background: #D9D9D9;
    /* transition: top 0.25s, left 0.25s; */
}

/*MÃO DIREITA*/
.astro .bd .md {
    position: absolute;
    top: 76px;
    left: 31px;
    transform: rotate(0deg);
    transition: top 0.25s, left 0.25s;
}

.astro .bd .md .palmad {
    position: absolute;
    top: 0px;
    left: -25px;
    width: 49px;
    height: 78px;
    transform: rotate(90deg);
    flex-shrink: 0;
    border-radius: 19px;
    background: #AAA;
}

.astro .bd .md .polegard {
    position: absolute;
    top: 37px;
    left: -51px;
    width: 21px;
    height: 60px;
    transform: rotate(0deg);
    flex-shrink: 0;
    border-radius: 15px 15px 15px 7px;
    background: #9A9A9A;
}

.astro .bd .md .indicadord {
    position: absolute;
    top: 37px;
    left: -32px;
    width: 20px;
    height: 85px;
    transform: rotate(0deg);
    flex-shrink: 0;
    border-radius: 15px;
    background: #9A9A9A;
}

.astro .bd .md .meiod {
    position: absolute;
    top: 37px;
    left: -12px;
    width: 20px;
    height: 95px;
    transform: rotate(0deg);
    flex-shrink: 0;
    border-radius: 15px;
    background: #9A9A9A;
}

.astro .bd .md .anulard {
    position: absolute;
    top: 37px;
    left: 8px;
    width: 20px;
    height: 85px;
    transform: rotate(0deg);
    flex-shrink: 0;
    border-radius: 15px;
    background: #9A9A9A;
}

.astro .bd .md .minimod {
    position: absolute;
    top: 37px;
    left: 27px;
    width: 20px;
    height: 70px;
    transform: rotate(0deg);
    flex-shrink: 0;
    border-radius: 15px;
    background: #9A9A9A;
}

/* ESTRELAS */

.espaco {
    position: relative;
    display:flex;
    }

.espaco span {
    position: relative;
    width: 10px;
    height: 5px;
    background: #ffffff; /*#4fc3dc;*/
    margin:0 4px;
    border-radius: 50%;
    box-shadow: 0 0 0 5px #ffffff44, 0 0 25px #ffffff, 0 0 50px #ffffff;
    animation: animEstrela 15s linear infinite;
    animation-duration: calc(250s / var(--i));
}

.espaco span:nth-child(even) {
    
    background: #e0e0e0;/*#ff2d75;*/
    box-shadow: 0 0 0 5px #e0e0e044, 0 0 25px #e0e0e0, 0 0 50px #e0e0e0;
}

@keyframes animEstrela {
    0% {
        transform: translateY(-50px) scale(0);
    }

    100% {
        transform: translateY(575px) scale(1);
    }
}