body {
    padding: 0;
    margin: 0;
    background-color: #171640;
}

.container {
    position: absolute;
    height: 31.25em;
    width: 31.25em;
    background-color: #ffffff0d;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    border-radius: 50%;
}

.center {
    transform: translateX(-50%);
    left: 50%;
}

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

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

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

.shadow {
    position: absolute;
    background-color: transparent;
    box-shadow: 0.93em 0.93em #857b054d;
    height: 12.5em;
    width: 12.5em;
    border-radius: 50%;
    bottom: 0.93em;
    right: 0.93em;
}

.astronaut {
    position: absolute;
    height: 17.5em;
    width: 15.62em;
    top: 7.5em;
    left: 6.25em;
    transform: rotate(-30deg);
    animation: float 5s infinite;
}

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

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

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

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

.helmet::after {
    content: "";
    position: absolute;
    background-color: #ffffff4d;
    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;
    top: 5em;
    border-radius: 0.5em;
}

.buttons {
    position: absolute;
    background-color: #bdd3f3;
    width: 3.43em;
    height: 1.87em;
    border-radius: 0.5em;
    top: 1.56em;
}

.buttons::after {
    content: "";
    position: absolute;
    width: 0.75em;
    height: 0.75em;
    background-color: #1683ed;
    top: 0.62em;
    border-radius: 50%;
    left: 0.25em;
    box-shadow: 1.12em 0 #fbd31f,
        2.25em 0 #e62c1b;
}

.buttons::before {
    content: "";
    position: absolute;
    height: 1.25em;
    width: 1.25em;
    background-color: #aec3d2;
    top: 2.5em;
    left: 1.12em;
    border-radius: 50%;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.leg-r::after,
.leg-l::after {
    content: "";
    position: absolute;
    background-color: #e62c1b;
    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 {
    content: "";
    position: absolute;
    background-color: transparent;
    height: 2.5em;
    width: 2.81em;
    border: 0.62em solid #3cb9f0;
    border-bottom: none;
    border-left: none;
    top: -3em;
    left: 3.44em;
    border-radius: 0 2.5em 0 0;
}

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

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

@media screen and (min-width: 700px) {
    .container {
        font-size: 20px;
    }
}