body {
  background-color: antiquewhite;
  animation: 166s colorShift infinite linear;
}

#content {
align: center;
}

#text-wrapper {
  margin: 50px;
}

h1 {
  text-align: center;
  color: #fff;
  font-size: 3em;
  letter-spacing: 5px;
  margin: 0;
  line-height: 0;
  animation: glitch1 6.5s infinite;
}
h1:nth-child(2) {
  color: #67f3da;
  opacity: 50%;
  animation: glitch1 6.5s infinite;
}

h1:nth-child(3) {
  color: #f16f6f;
  opacity: 50%;
  animation: glitch3 6.5s infinite;
}

/*CUBE STUFF*/
#cube {
    position: relative;
    margin: 100px auto;
    height: 100px;
    width: 100px;
    animation: 14s rotateforever infinite linear;
/*    animation: glitch1 3.5s infinite; */
    transform-style: preserve-3d;
}
/*
#cube:nth-child(2) {
  color: #67f3da;
  animation: glitch2 3.5s infinite;
  animation: 14s rotateforever infinite linear;
}
#cube:nth-child(3) {
  color: #f16f6f;
  animation: glitch3 3.5s infinite;
  animation: 14s rotateforever infinite linear, glitch3 3.5s infinite;
}
*/

.face {
    position: absolute;
    height: 78px;
    width: 78px;
    padding: 10px;
    border: white 2px solid;
    background-color: black;
    animation: 8s colorShift infinite linear;
    opacity: 30%;
}

.one {
    transform: rotateX(-54.7356deg) rotateY(45deg) translateZ(50px);
}

.two {
    transform: rotateX(-54.7356deg) rotateY(135deg) translateZ(50px);
}

.three {
    transform: rotateX(-54.7356deg) rotateY(225deg) translateZ(50px);
}

.four {
    transform: rotateX(-54.7356deg) rotateY(315deg) translateZ(50px);
}

.five {
    transform: rotateX(35.2644deg) rotateZ(-45deg) translateZ(50px);
}

.six {
    transform: rotateX(35.2644deg) rotateY(180deg) rotateZ(-45deg) translateZ(50px);
}


/*ANIMATION KEYFRAMES*/
@keyframes rotateforever {
    to {
        transform: rotateX(360deg) rotateY(360deg) rotateZ(-360deg);
    }
}

@keyframes colorShift {
  0%  {background-color: antiquewhite;}
  20%  {background-color: pink;}
  40%  {background-color: yellow;}
  60%  {background-color: cyan;}
  80%  {background-color: lime;}
  100%  {background-color: antiquewhite;}
}

@keyframes glitch1 {
  0% {
    transform: none;
    opacity: 1;
  }
  7% {
    transform: skew(-0.5deg, -0.9deg);
    opacity: 0.75;
  }
  10% {
    transform: none;
    opacity: 1;
  }
  27% {
    transform: none;
    opacity: 1;
  }
  30% {
    transform: skew(0.8deg, -0.1deg);
    opacity: 0.75;
  }
  35% {
    transform: none;
    opacity: 1;
  }
  52% {
    transform: none;
    opacity: 1;
  }
  55% {
    transform: skew(-1deg, 0.2deg);
    opacity: 0.75;
  }
  50% {
    transform: none;
    opacity: 1;
  }
  72% {
    transform: none;
    opacity: 1;
  }
  75% {
    transform: skew(0.4deg, 1deg);
    opacity: 0.75;
  }
  80% {
    transform: none;
    opacity: 1;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}

@keyframes glitch2 {
  0% {
    transform: none;
    opacity: 0.25;
  }
  7% {
    transform: translate(-2px, -3px);
    opacity: 0.5;
  }
  10% {
    transform: none;
    opacity: 0.25;
  }
  27% {
    transform: none;
    opacity: 0.25;
  }
  30% {
    transform: translate(-5px, -2px);
    opacity: 0.5;
  }
  35% {
    transform: none;
    opacity: 0.25;
  }
  52% {
    transform: none;
    opacity: 0.25;
  }
  55% {
    transform: translate(-5px, -1px);
    opacity: 0.5;
  }
  50% {
    transform: none;
    opacity: 0.25;
  }
  72% {
    transform: none;
    opacity: 0.25;
  }
  75% {
    transform: translate(-2px, -6px);
    opacity: 0.5;
  }
  80% {
    transform: none;
    opacity: 0.25;
  }
  100% {
    transform: none;
    opacity: 0.25;
  }
}

@keyframes glitch3 {
  0% {
    transform: none;
    opacity: 0.25;
  }
  7% {
    transform: translate(2px, 3px);
    opacity: 0.5;
  }
  10% {
    transform: none;
    opacity: 0.25;
  }
  27% {
    transform: none;
    opacity: 0.25;
  }
  30% {
    transform: translate(5px, 2px);
    opacity: 0.5;
  }
  35% {
    transform: none;
    opacity: 0.25;
  }
  52% {
    transform: none;
    opacity: 0.25;
  }
  55% {
    transform: translate(5px, 1px);
    opacity: 0.5;
  }
  50% {
    transform: none;
    opacity: 0.25;
  }
  72% {
    transform: none;
    opacity: 0.25;
  }
  75% {
    transform: translate(2px, 6px);
    opacity: 0.5;
  }
  80% {
    transform: none;
    opacity: 0.25;
  }
  100% {
    transform: none;
    opacity: 0.25;
  }
}