Android Robot (CSS Image)

by Konstantin Rouda

HTML

<section class="canvas">

    <!--Android-->
    <div class="android">

      <!--Head-->
      <div class="android__head">

        <!--Antennas-->
        <div class="android__antenna android__antenna--left"></div>
        <div class="android__antenna android__antenna--right"></div>

        <!--Face-->
        <div class="android__face">

          <!--Eyes-->
          <div class="android__eye android__eye--left"></div>       
          <div class="android__eye android__eye--right"></div>

        </div>

      </div>

      <!--Body-->
      <div class="android__body">
        <div class="loader"></div>
      </div>

      <!--Arms-->
      <div class="android__arm android__arm--left"></div>
      <div class="android__arm android__arm--right"></div>

      <!--Feet-->
      <div class="android__foot android__foot--left"></div>
      <div class="android__foot android__foot--right"></div>

    </div>

  </section>

CSS

HTML {
  font-size: 100%;
  line-height: 1.1;
  font-family: 'Open Sans', sans-serif;
  box-sizing: border-box;
}

BODY {
  margin: 0;
  color: #3a3d40;
  background: rgb(61, 144, 200);
}

*, *::before, *::after {
  box-sizing: inherit;
  font-weight: normal;
  color: inherit;
}

.canvas {
  position: relative;
  width: 650px; min-height: 650px;
  margin: 2em auto 0;
  //border: 1px solid #eee;
}

/*Actual Style*/


/*----------------------------
Android
------------------------------*/
.android {
  position: absolute;
  left: 20%; bottom: 0;
  width: 60%; height: 70%;
  //border: 1px solid;
}


/*----------------------------
Head
------------------------------*/
.android__head {
  position: absolute;
  left: 25%; top: 15%;
  width: 50%; height: 20%;
  border-radius: 50% / 100% 100% 0% 0%;
  background: #fff;
}


/*----------------------------
Antennas
------------------------------*/
.android__antenna {
  position: absolute;
  top: -30%;
  width: 5%; height: 50%;
  border-radius: 50% / 10% 10% 0 0;
  background: inherit;
}

.android__antenna--left {
  left: 15%;
  transform: rotate(-30deg);
}

.android__antenna--right {
  right: 15%;
  transform: rotate(30deg);
}


/*----------------------------
Face
------------------------------*/
.android__face {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  border-radius: inherit;
  background: inherit;
  z-index: 2;
}


/*----------------------------
Eyes
------------------------------*/
.android__eye {
  position: absolute;
  top: 40%;
  width: 10%; height: 20%;
  border-radius: 50%;
  background: rgb(61, 144, 200);
} 

.android__eye--left {
  left: 25%;
}

.android__eye--right {
  right: 25%;
}


/*----------------------------
Body
------------------------------*/
.android__body {
  position: absolute;
  left: 25%; top: 38%; 
  width: 50%; height: 43%;
  border-radius: 0 0 15% 15% / 0 0 15% 15%;
  background: #fff;
}

/*--------Loader--------*/
.loader {
  position: absolute;
  left: 40%; top:...