body {
  -webkit-font-smoothing: antialiased;
  background: #422b2b;
}

* {
  box-sizing: border-box;
}

@keyframes flipY {
  0% {
    transform: translateX(-50%) scale3d(1, 1, 1) rotatex(0deg) rotatey(0deg) rotatez(0deg);
  }
  20.25% {
    transform: translateX(-50%) scale3d(1, 1, 1) rotatex(0deg) rotatey(90deg) rotatez(0deg);
  }
  100% {
    transform: translateX(-50%) scale3d(1, 1, 1) rotatex(0deg) rotatey(90deg) rotatez(0deg);
  }
}
@keyframes flipY-innerCube {
  0% {
    transform: translateX(-50%) scale3d(0.5, 0.5, 0.5) rotatex(0deg) rotatey(0deg) rotatez(0deg);
  }
  20.25% {
    transform: translateX(-50%) scale3d(0.5, 0.5, 0.5) rotatex(0deg) rotatey(-90deg) rotatez(0deg);
  }
  100% {
    transform: translateX(-50%) scale3d(0.5, 0.5, 0.5) rotatex(0deg) rotatey(-90deg) rotatez(0deg);
  }
}
@keyframes flipY-innerShadow {
  0% {
    transform: translatex(-50%) rotatex(-90deg) translatez(-20px) rotatez(0deg);
  }
  20.25% {
    transform: translatex(-50%) rotatex(-90deg) translatez(-20px) rotatez(-90deg);
  }
  100% {
    transform: translatex(-50%) rotatex(-90deg) translatez(-20px) rotatez(-90deg);
  }
}
@keyframes flipY-outterShadow {
  0% {
    transform: translatex(-50%) rotatex(-90deg) translatez(105px) rotatez(0deg);
  }
  20.25% {
    transform: translatex(-50%) rotatex(-90deg) translatez(105px) rotatez(90deg);
  }
  100% {
    transform: translatex(-50%) rotatex(-90deg) translatez(105px) rotatez(90deg);
  }
}
@keyframes border-front {
  0% {
    border-width: 1px 6px 6px 1px;
  }
  2.25% {
    border-width: 1px 6px 6px 1px;
  }
  5.75% {
    border-width: 1px 1px 1px 1px;
  }
  100% {
    border-width: 1px 1px 1px 1px;
  }
}
@keyframes border-back {
  0% {
    border-width: 1px 1px 1px 1px;
  }
  2.25% {
    border-width: 1px 1px 1px 1px;
  }
  5.75% {
    border-width: 1px 1px 6px 6px;
  }
  100% {
    border-width: 1px 1px 6px 6px;
  }
}
@keyframes border-top {
  0% {
    border-width: 6px 6px 1px 1px;
  }
  2.25% {
    border-width: 6px 6px 1px 1px;
  }
  5.75% {
    border-width: 1px 6px 6px 1px;
  }
  100% {
    border-width: 1px 6px 6px 1px;
  }
}
@keyframes border-left {
  0% {
    border-width: 1px 1px 6px 6px;
  }
  2.25% {
    border-width: 1px 1px 6px 6px;
  }
  5.75% {
    border-width: 1px 6px 6px 1px;
  }
  100% {
    border-width: 1px 6px 6px 1px;
  }
}
@keyframes hoverY {
  0% {
    transform: translatey(0px);
  }
  100% {
    transform: translatey(-30px);
  }
}
@keyframes scaleBigShadow {
  0% {
    transform: scale3d(0.65, 0.65, 0.65);
  }
  100% {
    transform: scale3d(0.6, 0.6, 0.6);
  }
}
@keyframes scaleSmallShadow {
  0% {
    transform: scale3d(0.45, 0.45, 0.45);
  }
  100% {
    transform: scale3d(0.37, 0.37, 0.37);
  }
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.scene {
  position: relative;
  width: 120px;
  height: 120px;
  margin-top: 120px;
  transform-style: preserve-3d;
  transform: translateX(40px) rotatex(-33.5deg) rotatey(45deg);
}
.scene .webpack-cube {
  transform-style: preserve-3d;
  animation: hoverY 2s infinite alternate;
  animation-timing-function: ease-in-out;
}
.scene .outer-cube {
  position: absolute;
  width: 120px;
  height: 120px;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
  animation: flipY 5.2s infinite;
  display: inline-block;
}
.scene .outer-cube .face {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  background: rgba(200, 214, 249, 0.2);
  line-height: 100px;
  border: 1px solid #2B3A42;
}
.scene .outer-cube .face-front {
  transform: translatez(60px);
  border-right-width: 6px;
  border-bottom-width: 6px;
  animation: border-front 5.2s infinite;
}
.scene .outer-cube .face-back {
  transform: rotateY(180deg) translatez(60px);
  animation: border-back 5.2s infinite;
}
.scene .outer-cube .face-top {
  transform: rotatex(90deg) translatez(60px);
  border-top-width: 6px;
  border-right-width: 6px;
  animation: border-top 5.2s infinite;
}
.scene .outer-cube .face-bottom {
  transform: rotatex(-90deg) translatez(60px);
}
.scene .outer-cube .face-left {
  transform: rotateY(-90deg) translatez(60px);
  border-left-width: 6px;
  border-bottom-width: 6px;
  animation: border-left 5.2s infinite;
}
.scene .outer-cube .face-right {
  transform: rotateY(90deg) translatez(60px);
}
.scene .inner-cube {
  display: inline-block;
  position: absolute;
  width: 120px;
  height: 120px;
  left: 0;
  top: -2px;
  transform-style: preserve-3d;
  animation: flipY-innerCube 5.2s infinite;
}
.scene .inner-cube .face {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  background: rgb(58, 37, 59);
  line-height: 100px;
  border: 2px solid #1E0E1F;
}
.scene .inner-cube .face-front {
  transform: translatez(60px);
}
.scene .inner-cube .face-back {
  transform: rotateY(180deg) translatez(60px);
}
.scene .inner-cube .face-top {
  transform: rotatex(90deg) translatez(60px);
}
.scene .inner-cube .face-bottom {
  transform: rotatex(-90deg) translatez(60px);
}
.scene .inner-cube .face-left {
  transform: rotateY(-90deg) translatez(60px);
}
.scene .inner-cube .face-right {
  transform: rotateY(90deg) translatez(60px);
}
.scene .shadows-outer-container {
  display: inline-block;
  transform-style: preserve-3d;
  width: 120px;
  height: 120px;
  transform: translatex(-50%) rotatex(-90deg) translatez(110px);
  animation: flipY-outterShadow 5.2s infinite;
}
.scene .shadows-outer-container .shadow-outer {
  display: inline-block;
  position: absolute;
  width: 120px;
  height: 120px;
  background-color: rgba(0, 0, 0, 0.5);
  animation: scaleBigShadow 2s infinite alternate;
  animation-timing-function: ease-in-out;
  box-shadow: 0px 0px 45px 35px rgba(0, 0, 0, 0.5);
  transform-origin: center center;
  transform: scale3d(0.8, 0.8, 0.8);
}
.scene .shadows-inner-container {
  display: inline-block;
  transform-style: preserve-3d;
  width: 120px;
  height: 120px;
  transform: translatex(-50%) rotatex(-90deg) translatez(0px) rotatez(0deg);
  animation: flipY-innerShadow 5.2s infinite;
}
.scene .shadows-inner-container .shadow-inner {
  display: inline-block;
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 15px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 10%, rgba(109, 109, 109, 0.7) 50%, rgba(0, 0, 0, 0)), linear-gradient(90deg, rgba(0, 0, 0, 0) 10%, rgba(109, 109, 109, 0.7) 50%, rgba(0, 0, 0, 0)), linear-gradient(180deg, rgba(0, 0, 0, 0) 10%, rgba(109, 109, 109, 0.7) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, rgba(0, 0, 0, 0) 10%, rgba(109, 109, 109, 0.7) 50%, rgba(0, 0, 0, 0));
  animation: scaleSmallShadow 2s infinite alternate;
  animation-timing-function: ease-in-out;
  transform-origin: center center;
  transform: scale3d(0.4, 0.4, 0.4);
}

/*# sourceMappingURL=logo.css.map */