.wrapper {
    position: absolute;
    width: 31.25em;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

.planet {
    height: 12.5em;
    width: 12.5em;
    border-radius: 50%;
    position: absolute;
    background-color: #f5d201;
    top: 2.81em;
    left: 13.75em;
}

.planet:before {
    position: absolute;
    content: "";
    background-color: #fcec8e;
    height: 1.25em;
    width: 6.87em;
    border-radius: 0.62em;
    top: 3em;
    left: 4.25em;
    -webkit-box-shadow: 1.43em 3.65em 0 -0.25em #fcec8e, -1.25em 4.75em 0 0.12em #fcec8e;
    box-shadow: 1.43em 3.65em 0 -0.25em #fcec8e, -1.25em 4.75em 0 0.12em #fcec8e;
}

.planet:after {
    position: absolute;
    content: "";
    background-color: #edb514;
    height: 0.75em;
    width: 2.5em;
    border-radius: 0.46em;
    top: 1.87em;
    left: 3em;
    -webkit-box-shadow: -1.25em 3.75em 0 0.37em #edb514, 4.06em 8.43em 0 0.12em #edb514;
    box-shadow: -1.25em 3.75em 0 0.37em #edb514, 4.06em 8.43em 0 0.12em #edb514;
}

.astronaut-l {
    position: absolute;
    height: 17.5em;
    width: 17em;
    text-align: end;
    right: 0;
    /* -webkit-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    transform: rotate(-20deg);
    -webkit-animation: float 5s infinite; */
}

.astronaut-r {
    position: absolute;
    height: 17.5em;
    width: 17em;
    text-align: start;
    left: 0;
    /* -webkit-transform: rotate(-30deg);
    -ms-transform: rotate(-30deg);
    transform: rotate(-20deg);
    -webkit-animation: float 5s infinite; */
}

@-webkit-keyframes float {
    50% {
        -webkit-transform: rotate(-30deg) translateY(1.87em);
        transform: rotate(-30deg) translateY(1.87em);
    }
}

@keyframes float {
    50% {
        -webkit-transform: rotate(-30deg) translateY(1.87em);
        transform: rotate(-30deg) translateY(1.87em);
    }
}

.suit {
    position: absolute;
    background-color: #e2e9f4;
    height: 6.25em;
    width: 6.25em;
    border-radius: 10%;
    top: 5.5em;
}

.helmet {
    background-color: #e2e9f4;
    height: 5.8125em;
    width: 6.25em;
    border-radius: 45%;
    position: absolute;
    top: -5.43em;
}

.helmet:before {
    position: absolute;
    content: "";
    background-color: #64c1f7;
    height: 3.75em;
    width: 5em;
    border-radius: 60% 60% 40% 40%;
    left: 0.62em;
    top: 0.43em;
}

.helmet:after {
    content: "";
    position: absolute;
    background-color: rgba(255, 255, 255, 0.3);
    height: 0.93em;
    width: 0.93em;
    border-radius: 50%;
    left: 1.25em;
    top: 1.56em;
}

.tank {
    position: absolute;
    background-color: #aec3d2;
    height: 7.5em;
    width: 7.5em;
    border-radius: 0.62em;
    top: 5em;
}

.hand-l,
.hand-r {
    position: absolute;
    height: 1.62em;
    width: 4.68em;
    background-color: #e2e9f4;
    border-radius: 2.5em;
    top: -0.62em;
}

.hand-l {
    -webkit-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
    left: -3.12em;
}

.hand-r {
    -webkit-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    transform: rotate(-20deg);
    right: -3.12em;
}

.hand-l:before,
.hand-r:before {
    position: absolute;
    content: "";
    height: 1.62em;
    width: 4.81em;
    background-color: #e2e9f4;
    border-radius: 1.62em;
    bottom: 1.62em;
}

.hand-r:before {
    left: 1.87em;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.hand-l:before {
    right: 1.87em;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.hand-l:after,
.hand-r:after {
    position: absolute;
    content: "";
    background-color: #e62c1b;
    width: 1.75em;
    height: 0.34em;
    border-radius: 0.81em;
    top: -1.56em;
}

.hand-l:after {
    left: -0.43em;
}

.hand-r:after {
    right: -0.43em;
}

.leg-l,
.leg-r {
    height: 6.25em;
    width: 2.5em;
    background-color: #e2e9f4;
    position: absolute;
    top: 5em;
}

.leg-l {
    left: -0.75em;
    -webkit-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
}

.leg-r {
    right: -0.75em;
    -webkit-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    transform: rotate(-20deg);
}

.leg-l:before,
.leg-r:before {
    position: absolute;
    content: "";
    background-color: #ffffff;
    width: 2.68em;
    height: 2.18em;
    border-radius: 50% 50% 0 0;
    top: 4.06em;
    left: -0.09em;
}

.leg-l:after,
.leg-r:after {
    position: absolute;
    content: "";
    background-color: #ff6347;
    width: 2.81em;
    height: 0.31em;
    border-radius: 1em;
    bottom: -0.09em;
    left: -0.15em;
}

.pipe {
    position: absolute;
    background-color: transparent;
    height: 2.5em;
    width: 6.25em;
    border: 0.62em solid #3cb9f0;
    border-top: none;
    border-radius: 0 0 3.75em 1.87em;
    left: 2.81em;
    top: 4.5em;
}

.pipe:before {
    position: absolute;
    content: "";
    background-color: transparent;
    height: 2.5em;
    width: 2.81em;
    border: 0.62em solid #3cb9f0;
    border-left: none;
    border-bottom: none;
    top: -3.12em;
    left: 3.43em;
    border-radius: 0 2.5em 0 0;
}

.stars {
    background-color: #ffffff;
    width: 0.31em;
    height: 0.31em;
    border-radius: 50%;
    position: absolute;
    top: 9.37em;
    left: 3.75em;
    -webkit-box-shadow: 4.37em 9.37em #ffffff, 5.62em -6.25em #ffffff, 17.5em 15.62em #ffffff, 23.75em 7.5em #ffffff, 3.75em 16.25em #ffffff;
    box-shadow: 4.37em 9.37em #ffffff, 5.62em -6.25em #ffffff, 17.5em 15.62em #ffffff, 23.75em 7.5em #ffffff, 3.75em 16.25em #ffffff;
    -webkit-animation: twinkle 3s infinite;
    animation: twinkle 3s infinite;
}

@-webkit-keyframes twinkle {
    50% {
        opacity: 0.2;
    }
}

@keyframes twinkle {
    50% {
        opacity: 0.2;
    }
}

.fab {
    color: #ff0000;
}

@media screen and (max-width: 500px) {
    .wrapper {
        font-size: 10px;
    }
}

@media screen and (min-width: 769px) {}

@media screen and (min-device-width: 481px) and (max-device-width: 768px) {
    .astronaut-r {
        display: none;
    }
    .astronaut-l {
        display: none;
    }
}

@media only screen and (max-device-width: 480px) {
    .astronaut-r {
        display: none;
    }
    .astronaut-l {
        display: none;
    }
}