html{

  background-color: #000;
  
}




.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  perspective: 300px;
}

* {
  box-sizing: border-box;
}

.head {
  position: relative;
  width: 8rem;
  height: 8rem;
  background: #333;
  border-radius: 100% 100% 100% 100%/100% 100% 70% 70%;
  padding: 24px 16px 16px 16px;
  -webkit-animation: move-head 15s infinite;
          animation: move-head 15s infinite;
  transform-style: preserve-3d;
  transform-origin: center center;
}

.backside {
  position: absolute;
  top: -0.5rem;
  left: -0.25rem;
  width: 8.5rem;
  height: 8rem;
  border-radius: 4rem;
  transform: translateZ(-1.6rem);
  background: #333;
}

.face {
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
  width: 100%;
  height: 100%;
  border-radius: 100% 100% 100% 100%/100% 100% 70% 70%;
  transform: translateZ(1rem);
  transform-style: preserve-3d;
}

.eyes {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
  transform: translateZ(1rem);
}

.eye {
  background: #333;
  width: 0.75rem;
  height: 1.5rem;
  border-radius: 0.5rem;
  -webkit-animation: blink 2.5s infinite;
          animation: blink 2.5s infinite;
}

.goggles {
  display: flex;
  position: absolute;
  top: 0.5rem;
  left: 1rem;
  transform: translateZ(2rem);
  transform-style: preserve-3d;
}

.glass {
  width: 3.25rem;
  height: 3rem;
  background: white;
  border: 0.5rem solid #333;
}
.glass.left {
  margin-right: -0.25rem;
  border-radius: 40% 50% 60% 50%/40% 40% 60% 50%;
  transform: rotateY(-15deg) rotateZ(-5deg) rotateX(15deg);
}
.glass.right {
  margin-left: -0.25rem;
  border-radius: 50% 40% 50% 60%/40% 40% 60% 50%;
  transform: rotateY(15deg) rotateZ(5deg) rotateX(15deg);
}

.headset {
  position: absolute;
  top: 3.5rem;
  left: -1rem;
  background: #333;
  width: 10rem;
  height: 3.5rem;
  border-radius: 1.5rem;
  transform: translateZ(-0.75rem);
}

@-webkit-keyframes move-head {
  0%, 15% {
    transform: rotate3d(0, 0, 0, 30deg);
  }
  20%, 45% {
    transform: rotate3d(-0.5, 1, 0, 30deg);
  }
  55%, 60% {
    transform: rotate3d(-0.5, -1, 0, 30deg);
  }
  65%, 75%, 90%, 100% {
    transform: rotate3d(0, 0, 0, 30deg);
  }
  80%, 85% {
    transform: rotate3d(-1, 0, 0, 30deg);
  }
}

@keyframes move-head {
  0%, 15% {
    transform: rotate3d(0, 0, 0, 30deg);
  }
  20%, 45% {
    transform: rotate3d(-0.5, 1, 0, 30deg);
  }
  55%, 60% {
    transform: rotate3d(-0.5, -1, 0, 30deg);
  }
  65%, 75%, 90%, 100% {
    transform: rotate3d(0, 0, 0, 30deg);
  }
  80%, 85% {
    transform: rotate3d(-1, 0, 0, 30deg);
  }
}
@-webkit-keyframes blink {
  0% {
    transform: scaleY(1);
  }
  5% {
    transform: scaleY(0.2);
  }
  10% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(1);
  }
}
@keyframes blink {
  0% {
    transform: scaleY(1);
  }
  5% {
    transform: scaleY(0.2);
  }
  10% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(1);
  }
}