body {
  min-height: 250px;
  height: 100vh;
  position: relative;
  background-color: white;
}
div {
  position: absolute;
  left: 50%;
  top: 50%;
}
div:before,
div:after {
  display: block;
  content: '';
  position: absolute;
}
@media (max-width: 400px) {
  div {
    transform: scale(0.8);
  }
}
#critter {
  box-sizing: border-box;
  font-size: 10px;
  width: 20em;
  height: 20em;
  margin-left: -12.2em;
  margin-top: -10em;
  background-repeat: no-repeat;
  background-image: radial-gradient(ellipse, black 40%, rgba(0,0,0,0) 41%), linear-gradient(80deg, rgba(255,255,255,0) 70%, #aaa 71%), linear-gradient(-80deg, rgba(255,255,255,0) 70%, #aaa 71%), linear-gradient(150deg, rgba(255,255,255,0) 50%, #aaa 51%), linear-gradient(-150deg, rgba(255,255,255,0) 50%, #aaa 51%), radial-gradient(circle, black 40%, rgba(255,255,255,0.3) 41%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 51%), radial-gradient(circle, black 40%, rgba(255,255,255,0.3) 41%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 51%), radial-gradient(ellipse, #444 50%, rgba(0,0,0,0) 51%), radial-gradient(ellipse, white 50%, rgba(255,255,255,0) 51%), radial-gradient(circle at 50% 0, #48d1cc 60%, rgba(72,209,204,0) 61%), radial-gradient(circle, rgba(255,215,0,0.6) 50%, rgba(255,215,0,0) 51%), radial-gradient(circle, #ffd700 50%, rgba(255,215,0,0) 51%), radial-gradient(circle, rgba(255,215,0,0.5) 50%, rgba(255,215,0,0) 51%), radial-gradient(circle, #ffd700 50%, rgba(255,215,0,0) 51%), radial-gradient(circle, #ffd700 50%, rgba(255,215,0,0) 51%), radial-gradient(circle, rgba(255,215,0,0.7) 50%, rgba(255,215,0,0) 51%), radial-gradient(circle, white 50%, rgba(255,255,255,0) 51%), radial-gradient(circle, white 50%, rgba(255,255,255,0) 51%), radial-gradient(circle, white 50%, rgba(255,255,255,0) 51%), radial-gradient(circle, white 50%, rgba(255,255,255,0) 51%), radial-gradient(circle, white 50%, rgba(255,255,255,0) 51%), linear-gradient(100deg, rgba(255,255,255,0) 20%, #aaa 21%), linear-gradient(-100deg, rgba(255,255,255,0) 20%, #aaa 21%), radial-gradient(ellipse, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 51%), radial-gradient(ellipse, #aaa 50%, rgba(255,255,255,0) 51%), radial-gradient(ellipse, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 51%), radial-gradient(ellipse, #aaa 50%, rgba(255,255,255,0) 51%);
  background-size: 3em 2em, 3em 4em, 3em 4em, 3em 3em, 3em 3em, 2em 2em, 2em 2em, 12em 6em, 14em 7em, 10em 5em, 1em 1em, 1em 1em, 2em 2em, 0.6em 0.6em, 1em 1em, 1.3em 1.3em, 2em 2em, 4em 4em, 1.5em 1.5em, 3em 3em, 4em 4em, 10em 15em, 10em 15em, 2em 3em, 4em 5em, 2em 3em, 4em 5em;
  background-position: 50% 10em, left 7em top 6em, right 7em top 6em, left 7em top 9em, right 7em top 9em, left 7.4em top 8em, right 7.4em top 8em, 50% 6em, 50% 5.1em, left 50% bottom -1em, left 5.8em bottom 4.2em, left 7.5em bottom 5.3em, left 8em bottom 3.6em, left 10em bottom 4.9em, left 11em bottom 5.2em, left 11.8em bottom 4.3em, left 5.5em bottom 3.6em, left 6.5em bottom 3.3em, left 9em bottom 5.2em, left 9em bottom 3.3em, left 10.5em bottom 2.9em, left 2em bottom 0, right 2em bottom 0, left 5em top 2.5em, left 4em top 1em, right 5em top 2.5em, right 4em top 1em;
}
#critter:before {
  width: 6em;
  height: 19em;
  right: -4em;
  bottom: 0;
  background-color: #aaa;
  background-repeat: no-repeat;
  background-image: repeating-linear-gradient(to bottom, #444, #444 2.2em, #aaa 2.2em, #aaa 4.4em);
  border-radius: 5em 0;
}
#critter:after {
  width: 10em;
  height: 0.6em;
  left: 5em;
  bottom: 4em;
  background-color: #40e0d0;
  border-radius: 0.3em;
}