@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300&display=swap');

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
  font-family: Verdana, sans-serif;
  background-image: url("../img/glitchbg.gif");
  background-size: cover;
}
/*background to cube*/
.cubebg{
  animation: flicker 3s infinite linear;
  /*border:darkgrey solid 2px;*/
  border-radius: 50%;
  height:600px;
}

.cube {
  width:500px;
  height: 500px;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-100px);
  transition: transform 1s;
  animation: rotate 20s infinite linear;
}

@keyframes rotate {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }

  to {
    transform: rotateX(360deg) rotateY(360deg) translateZ(100px) ;
  }
}

@keyframes flicker {
  0%   {background-color: black;}
  50%  {background-color: white;}
  100% {background-color: black;}
}



.cube__face {
  position: absolute;
  width: 500px;
  height:500px;
  border: 10px solid lightgreen;
  line-height: 400px;
  font-size: 40px;
  font-weight: bold;
  color: white;
  text-align: center;
  /*animation: flicker 8s infinite linear;*/
}

.cube__face--1  {background-image: url("../img/glitch2.gif"); background-size: cover;  }
.cube__face--2   {background-image: url("../img/space.gif"); background-size: cover; }
.cube__face--3   {background-image: url("../img/coding.gif"); background-size: cover; }
.cube__face--4  {background-image: url("../img/woah.gif"); background-size: cover; }
.cube__face--5   {background-image: url("../img/bob.gif"); background-size: cover; }
.cube__face--6  {background-image: url("../img/soul.gif"); background-size: cover; }

.cube__face--1  { transform: rotateY(  0deg) translateZ(300px); }
.cube__face--2   { transform: rotateY(180deg) translateZ(300px); }
.cube__face--3  { transform: rotateY( 90deg) translateZ(300px); }
.cube__face--4   { transform: rotateY(-90deg) translateZ(300px); }
.cube__face--5   { transform: rotateX( 90deg) translateZ(300px); }
.cube__face--6 { transform: rotateX(-90deg) translateZ(300px); }

h1 {
  text-align: center;
  color: #fff;
  font-size: 5em;
  letter-spacing: 8px;
  font-family: 'Chakra Petch', sans-serif;
  font-weight: 400;
  /*Create overlap*/

  margin: 0;
  line-height: 0;
  /*Animation*/

  animation: glitch1 2.5s infinite;
}

h1:nth-child(2) {
  color: #67f3da;
  animation: glitch2 2.5s infinite;
}

h1:nth-child(3) {
  color: #f16f6f;
  animation: glitch3 2.5s infinite;
}
/*Keyframes*/

@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;
  }
}