$body-width:30vmin;
$head-width:$body-width*.6;
$eye-width:$head-width*.2;

@mixin element($width,$height:$width,$radius:$width,$background:transparent) { // creates a element element and requires width, then sets the height and radius if you don't pass them (defaults to a circle)
  background:$background;
  border-radius:$radius;
  content:"";
  display:block;
  height:$height;
  width:$width;
}

* {
  box-sizing:border-box;
  position:relative;
}
body {
  background:#222;
}
/* bb-8 */
.bb {
  margin:20vmin auto 0;
  top:25%;
}
/* antennae */
.head:after {
  @include element(.5vmin,5vmin,$radius:0,$background:white);
  border:0 solid black;
  border-width:1vmin 0;
  bottom:$head-width*.5;
  box-shadow:-2vmin 4vmin 0 0 white;
  left:55%;
  position:absolute;
  z-index:0;
}
/* head */
.head {
  @include element($head-width,$head-width*.5,$head-width $head-width 0 0,white);
  // animation:tilt 2s linear infinite;
  background:
    linear-gradient(transparent,transparent 8%,gray 8%,gray 22%,transparent 22%),
    linear-gradient(transparent,transparent 30%,orange 30%,orange 40%,transparent 40%),
    linear-gradient(90deg,transparent,transparent 30%,white 30%,white 70%,transparent 70%),
    linear-gradient(90deg,transparent,transparent 8%,white 8%,white 12%,transparent 12%),
    linear-gradient(90deg,transparent,transparent 3%,white 3%,white 5%,transparent 5%),
    linear-gradient(90deg,transparent,transparent 24%,white 24%,white 26%,transparent 26%),
    linear-gradient(90deg,transparent,transparent 74%,white 74%,white 80%,transparent 80%),
    linear-gradient(90deg,transparent,transparent 88%,white 88%,white 90%,transparent 90%),
    linear-gradient(90deg,transparent,transparent 94%,white 94%,white 96%,transparent 96%),
    #fff linear-gradient(transparent,transparent 85%,orange 85%,orange 100%,transparent 100%);
  box-shadow:
    0 .5vmin 0 0 gray; // bottom of head
  margin:0 auto 2vmin;
  z-index:5;
}
/* eye */
.head:before {
  @include element($eye-width,$eye-width,50%,white); // serves visually as the highlight of the eye, but properties help determine what other parts of the eye elements look like as well
  box-shadow:
    0 0 0 $eye-width*.2 white,
    inset $eye-width*-.2 $eye-width*-.2 0 $eye-width*.4 black, // creates the look of the eye, but serves to create the highlight
    // Secondary camera/eye.
    $eye-width $eye-width*.8 0 $eye-width*-0.3 black,
    $eye-width $eye-width*.8 0 $eye-width*-0.2 white,
    $eye-width $eye-width*.8 0 $eye-width*-0.1 grey,
    ;
  margin:auto;
  position:inherit;
  top:2vmin;
  z-index:10;
}
/* body */
.body {
  @include element($body-width,$body-width,50%);
  // animation:roll 2s linear infinite;
  background:
    radial-gradient(circle at top,white,white 15%,transparent 15%),
    radial-gradient(circle at bottom,white,white 15%,transparent 15%),
    radial-gradient(circle at right,white,white 15%,transparent 15%),
    radial-gradient(circle at left,white,white 15%,transparent 15%), // the white "panels" on the edges of the body
    radial-gradient(circle at top,orange,orange 20%,transparent 20%),
    radial-gradient(circle at bottom,orange,orange 20%,transparent 20%),
    radial-gradient(circle at right,orange,orange 20%,transparent 20%),
    radial-gradient(circle at left,orange,orange 20%,transparent 20%), /* the orange "borders" of the "panels" on the edges of the body, made by overlaying a white circle atop */
    radial-gradient(white,white 20%,transparent 20%), /* center white panel on the body */
    radial-gradient(orange,orange 30%,transparent 30%), /* center orange "borders" on the center panel on the body */
    linear-gradient(90deg,transparent,transparent 50%,black 50%,black 50.5%,transparent 50.5%), /* vertical seam */
    #fff linear-gradient(transparent,transparent 50%,black 50%,black 50.5%,transparent 50.5%) /* horizontal seam & body background */;
  margin:0 auto;
}

@keyframes roll {
  0% {
    
  }
  100% {
    transform:rotate(180deg);
  }
}
@keyframes tilt {
  0% {
    
  }
  100% {
    transform:
      translateX(-40px)
      rotate(-15deg)
      ;
  }
}