#robot {
  position: relative;
  height: 36vh;
  width: 10vh;
  margin: 0 auto;
  animation: robot 1.5s infinite ease-in-out;
  z-index: 2;
}

#robot div {
  position: absolute;
  transform-origin: 50% 0;
}

#robot .r div {
  background: #29516D;
}

#robot .l div {
  background: #326384;
}

#robot .leg.r, #robot .arm.l {
  animation: trans 1.5s 0.75s infinite ease-in-out;
}

#robot .leg.l, #robot .arm.r {
  animation: trans 1.5s infinite ease-in-out;
}

#robot .head {
  top: 2vh;
  left: 2.5vh;
  width: 4.5vh;
  height: 5vh;
  margin: 0 auto;
  transform-origin: 20% 150%;
  animation: head 1.5s infinite ease-in-out;
  background: #326384;
}

#robot .arm {
  left: 2.5vh;
  top: 6.25vh;
  width: 4vh;
  height: 2.75vh;
}

#robot .arm div {
  top: 100%;
  left: 0;
  width: 100%;
  height: 5vh;
  box-sizing: border-box;
  transform: rotate(5deg);
  animation: arms 1.5s infinite ease-in-out;
}

#robot .arm.l div {
  animation-delay: -0.75s;
}

#robot .leg {
  top: 18.5vh;
  left: 2.5vh;
  width: 4vh;
  height: 2vh;
}

#robot .leg div {
  width: 100%;
  height: 7.5vh;
  top: 100%;
  animation: legs1 1.5s infinite ease-in-out;
}

#robot .leg div div {
  animation: legs2 1.5s infinite ease-in-out;
}

#robot .leg.r div {
  animation-delay: -0.75s;
}

#robot .leg.r div div {
  background: #E95420;
}
  
.shadow {
  position: relative;
  width: 11vh;
  height: 1.5vh;
  margin: 0 auto;
  border-radius: 50%;
  background: #05314f;
  animation: shadow 1.5s infinite ease-in-out;
  z-index: 1;
}

/**************************************************************************************/
@keyframes robot {
  0%, 50%, 100% {
    transform: translateY(0vh) rotate(0.2deg);
  }

  15%, 65% {
    transform: translateY(0.15vh) rotate(-0.2deg);
  }
}

@keyframes trans {
  0%, 100% {
    transform: translateX(0vh);
  }

  50% {
    transform: translateX(1.2vh);
  }
}

@keyframes head {
  0%, 100% {
    transform: rotate(-1deg);
  }

  25%, 75% {
    transform: rotate(2deg);
  }

  50% {
    transform: rotate(0deg);
  }
}

@keyframes arms {
  0%, 100% {
    transform: rotate(2.5deg);
  }

  50% {
    transform: rotate(-10deg);
  }
}

@keyframes legs1 {
  0%, 100% {
    transform: rotate(10deg);
  }

  45% {
    transform: rotate(-15deg);
  }
}

@keyframes legs2 {
  0%, 100% {
    transform: rotate(2deg);
  }

  33% {
    transform: rotate(20deg);
  }

  50% {
    transform: rotate(0deg);
  }
}

@keyframes shadow {
  0%, 50%, 100% {
    transform: scale(1.02);
  }

  25%, 75% {
    transform: scale(0.98);
  }
}