html,
body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100vh;
  width: 100vw;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
html,
body,
.wrapper {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.wrapper {
  margin: auto;
  height: 8rem;
  -webkit-transform: translateZ(100px);
          transform: translateZ(100px);
}
svg {
  height: 100%;
  overflow: visible;
}
[class^="letter-"] {
  float: left;
}
.letter-wrapper {
  margin-bottom: 1rem;
  height: 100%;
  position: relative;
}
.letter-wrapper-a {
  -webkit-perspective: 400px;
          perspective: 400px;
}
.letter-wrapper-g {
  margin-left: 1rem;
}
.letter-wrapper-o {
  margin-left: 0.8rem;
  -webkit-perspective: 400px;
          perspective: 400px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.letter-n {
  margin-left: 0.74rem;
}
.letter-a {
  margin-left: -0.7rem;
}
.letter-a-flip {
  margin-left: -1.2rem;
}
.letter-a-flip .triangle {
  will-change: transform;
}
.letter-o {
  position: relative;
}
.letter-o,
.letter-o ~ svg {
  stroke-dashoffset: -1320;
  stroke-dasharray: 1320;
}
.letter-o path,
.letter-o ~ svg path {
  fill: none;
}
.letter-o use,
.letter-o ~ svg use {
  -webkit-transform: scale(0.98) translateY(2px) translateX(2px);
          transform: scale(0.98) translateY(2px) translateX(2px);
}
.letter-o-path {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
}
.cube {
  opacity: 0;
  width: 2rem;
  height: 2rem;
  position: absolute;
  background: #672f56;
  will-change: transform;
  -webkit-transform: rotateX(60deg) rotateZ(0deg);
          transform: rotateX(60deg) rotateZ(0deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.cube .face {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.cube .face.top {
  -webkit-transform: translateZ(2rem);
          transform: translateZ(2rem);
  background: #a83956;
}
.cube .face.left {
  -webkit-transform: rotateY(-90deg);
          transform: rotateY(-90deg);
  -webkit-transform-origin: 0 50%;
          transform-origin: 0 50%;
  background: #e14756;
}
.cube .face.front {
  -webkit-transform: rotateX(-90deg);
          transform: rotateX(-90deg);
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  background: #f67958;
}
.cube-p {
  margin-left: -2px;
}
.ball {
  width: 1rem;
  height: 1rem;
  background: #e14756;
  border-radius: 50%;
  position: absolute;
  will-change: transform;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.hidden {
  display: none;
}
.wrapper {
  margin-top: auto;
}