*{
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
}

#drone-shiz {
  animation: drone-shiz 1.5s ease-in-out infinite alternate;
  transform-box: fill-box;
  justify-content: center;
}
@keyframes drone-shiz {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(30deg);
}
}

#rotor-1, #rotor-2, #rotor-3, #rotor-4 {
  animation: rotor-1 1s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes rotor-1 {
  from {
    transform: rotate(0deg) translate(0, -5px);
  }
  to {
    transform: rotate(360deg) translate(0, -5px);
  }
}

#left-arm {
  animation: left-arm 1s ease-in-out infinite alternate;
  transform-origin: left;
  transform-box: fill-box;
}
@keyframes left-arm {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(-30deg);
}
}

#right-arm {
  animation: right-arm 1s ease-in-out infinite alternate;
  transform-origin: left;
  transform-box: fill-box;
}
@keyframes right-arm {
from {
transform: rotateZ(-30deg);
}
to {
transform: rotateZ(0deg);
}
}

#phone {
  animation: phone 1s ease-in-out infinite alternate;
}
@keyframes phone {
  from {
    transform: translate(30px, -200px);
  }
  to {
    transform: translate(30px, 20px);
  }
  
}