* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #000;
  overflow-x: hidden;
  background: #000
    url(http://www.script-tutorials.com/demos/360/images/stars.png) repeat top;
}

.container {
  width: 100vw;
  height: 100vh;
}

.astronaut {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  bottom: 35vmin;
}

.box {
  width: 40vmin;
  height: 40vmin;
  border-radius: 5vmin;
  background-color: #cccccc;
  border-top: 2vmin solid #fff;
  position: relative;
  top: 55vmin;
}

.head {
  width: 30vmin;
  height: 30vmin;
  background-color: #bbbbbb;
  border-radius: 52% 47% 51% 51% / 41% 49% 77% 71%;
  border-bottom: 2vmin solid #a0a0a0;
  border-top: 2vmin solid #dedee0;
  position: relative;
  z-index: 7;
}

.head:after {
  content: "";
  width: 24vmin;
  height: 18vmin;
  border-radius: 52% 47% 51% 51% / 41% 49% 77% 71%;
  background-image: linear-gradient(to top, #1a1930, #252345, #453e92, #574fba);
  position: absolute;
  bottom: 2vmin;
  left: 2vmin;
  border: 1vmin solid #000;
}

.suit-torso {
  width: 30vmin;
  height: 30vmin;
  background-color: #bbbbbb;
  background-image: linear-gradient(to right, #1c1c21, #bbbbbb, #1c1c21);
  border-radius: 14% 19% 19% 22% / 19% 20% 5% 5%;
  position: relative;
  bottom: 2vmin;
}

.belt-left,
.belt-right {
  width: 2vmin;
  height: 25vmin;
  border-radius: 50%;
  background-color: #000;
  position: absolute;
}

.belt-left {
  left: 7vmin;
}

.belt-right {
  right: 7vmin;
}

.left-arm,
.right-arm {
  display: flex;
  flex-direction: column;
}

.left-arm {
  position: absolute;
  left: -10vmin;
  bottom: -11vmin;
  transform: rotateZ(20deg);
}

.right-arm {
  position: absolute;
  right: -10vmin;
  bottom: -11vmin;
  transform: rotateZ(-20deg) scaleX(-1);
}

.la1,
.la2,
.la3 {
  border-bottom: 1vmin solid #636363;
  background-image: linear-gradient(to left, #636363, #838383, #f2f2f2);
}

.la1 {
  width: 10vmin;
  height: 15vmin;
  background-color: #bbbbbb;
  border-radius: 52% 48% 51% 49% / 78% 79% 21% 22%;
  z-index: 3;
}

.la2 {
  width: 10vmin;
  height: 10vmin;
  border-radius: 25% 22% 18% 25% / 29% 29% 27% 26%;
  background-color: #bbbbbb;
  position: relative;
  bottom: 2vmin;
  z-index: 2;
  transform: rotateZ(5deg);
}

.la3 {
  width: 10vmin;
  height: 10vmin;
  border-radius: 17% 81% 81% 25% / 29% 69% 50% 26%;
  background-color: #bbbbbb;
  position: relative;
  bottom: 4vmin;
  transform: rotateZ(-5deg);
  z-index: 1;
}

.la4 {
  width: 10vmin;
  height: 7vmin;
  border-radius: 40%;
  background-color: #bbbbbb;
  position: relative;
  bottom: 5vmin;
  border-bottom: 1vmin solid #8c8c8c;
  border-right: 1vmin solid #8c8c8c;
  background-image: linear-gradient(to left, #838383, #f2f2f2);
}

.la4:after {
  content: "";
  width: 8vmin;
  height: 2vmin;
  border-radius: 50%;
  background-color: #3f3f4b;
  position: absolute;
  top: 2.5vmin;
  left: 1vmin;
}

.left-palm {
  width: 10vmin;
  height: 8vmin;
  border-radius: 50%;
  background-color: #404042;
  position: relative;
  top: 1vmin;
  z-index: -1;
}

.f1,
.f2,
.f3,
.f4,
.thumb {
  width: 2vmin;
  height: 5vmin;
  border-radius: 40%;
  background-color: #404042;
  position: absolute;
  bottom: -3vmin;
  left: 0.4vmin;
}

.f2 {
  left: 2vmin;
}

.f3 {
  left: 4vmin;
}

.f4 {
  left: 6vmin;
}

.thumb {
  left: 9vmin;
  bottom: -1vmin;
  transform: rotateZ(-10deg);
}

.body-join {
  width: 30vmin;
  height: 10vmin;
  background-color: #3a3a45;
  border-radius: 0% 0% 49% 47% / 0% 0% 100% 100%;
  position: relative;
  bottom: 4vmin;
}

.left-leg,
.right-leg {
  display: flex;
  flex-direction: column;
}

.left-leg {
  position: absolute;
  top: 2vmin;
  left: -1.5vmin;
}

.right-leg {
  position: absolute;
  right: -1.5vmin;
  top: 2vmin;
  transform: scaleX(-1);
}

.ll1,
.ll2,
.ll3 {
  background-color: #bcbcbc;
  border-bottom: 1vmin solid #8c8c8c;
  background-image: linear-gradient(to left, #6b6b6b, #bbbbbb);
}

.ll1 {
  width: 14vmin;
  height: 12vmin;
  border-radius: 23% 34% 21% 22% / 29% 53% 20% 24%;
  z-index: 5;
  transform: rotateZ(10deg);
  border-top: 1vmin solid #1c1c21;
}

.ll2 {
  width: 12vmin;
  height: 12vmin;
  border-radius: 5% 15% 16% 15% / 29% 10% 20% 24%;
  position: relative;
  bottom: 2vmin;
  left: -1vmin;
  z-index: 4;
  transform: rotateZ(5deg);
}

.ll3 {
  width: 12vmin;
  height: 8vmin;
  border-radius: 12% 23% 16% 15% / 29% 53% 20% 24%;
  position: relative;
  bottom: 3.5vmin;
  left: -1vmin;
  transform: rotateZ(-5deg);
  z-index: 3;
}

.ll4 {
  width: 11vmin;
  height: 8vmin;
  background-color: #42424d;
  transform: rotateZ(-10deg) skew(-10deg);
  position: relative;
  bottom: 6vmin;
  left: 0.5vmin;
}

.ll5 {
  width: 13vmin;
  height: 11vmin;
  border-radius: 39% 45% 50% 20% / 54% 53% 20% 50%;
  background-color: #bbbbbb;
  position: relative;
  bottom: 8vmin;
  border-right: 2vmin solid #6b6b6b;
}

.twinkling {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.twinkling {
  background: transparent
    url(http://www.script-tutorials.com/demos/360/images/twinkling.png) repeat
    top center;
  z-index: -1;
  -moz-animation: move-twink-back 200s linear infinite;
  -ms-animation: move-twink-back 200s linear infinite;
  -o-animation: move-twink-back 200s linear infinite;
  -webkit-animation: move-twink-back 200s linear infinite;
  animation: move-twink-back 200s linear infinite;
}

@keyframes move-twink-back {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -10000px 5000px;
  }
}

@-webkit-keyframes move-twink-back {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -10000px 5000px;
  }
}

@-moz-keyframes move-twink-back {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -10000px 5000px;
  }
}

@-ms-keyframes move-twink-back {
  from {
    background-position: 0 0;
  }

  to {
    background-position: -10000px 5000px;
  }
}