// https://codepen.io/2urn/pen/Jcozm


// @import url(https://fonts.googleapis.com/css?family=Concert+One);

h1 {
 
/* animation:wobble 10s ease-in-out infinite; // not working here */
  
  

/* For less laggy effect, uncomment this:
  
  animation:none;
  -webkit-text-stroke:1px #fff; 
  
=========== */
  
}



* { box-sizing:border-box; }

body {
  background:#0a0a0a;
  overflow:hidden;
  text-align:center;
 }

/*
//  animation:wobble 5s ease-in-out infinite; 
// only one animation routine can be active;
*/
figure {
  animation:wobble 10s ease-in-out infinite;
/*  animation:glow 7s ease-in-out infinite;*/
  transform-origin:center center;
  transform-style:preserve-3d;
}

figure2 {
  animation:wobble 8s ease-in-out infinite;
/*  animation:glow 7s ease-in-out infinite;*/
  transform-origin:center center;
  transform-style:preserve-3d;
}

@keyframes wobble {
  50%,50%{ transform:rotate3d(1,1,0,15deg); 
  }
}

h1 {
  display:block;
  width:100%;
  padding:40px;
  line-height:1.5;
  font:700 4em 'Calibri', sans-serif;
//  font:900 8em 'Concert One', sans-serif;
  text-transform:uppercase;
  position:absolute;
  color:#0a0a5a;
  animation:glow 7s ease-in-out infinite;
}

h3 {
  display:block;
  width:100%;
  padding:30px;
  line-height:1.5;
  font:500 3em 'Calibri', sans-serif;
  position:absolute;
  animation:glow2 5s ease-in-out infinite;
}

@keyframes glow {
  /* 0%,55%{ transform:rotate3d(1,1,0,30deg); // wobble */
  0%,100%{ text-shadow:0 0 30px red; }
  25%{ text-shadow:0 0 30px orange; }
  50%{ text-shadow:0 0 30px forestgreen; }
  75%{ text-shadow:0 0 30px cyan; }
}

@keyframes glow2 {
  0%,100%{ text-shadow:0 0 50px red; }
  25%{ text-shadow:0 0 50px orange; }
  50%{ text-shadow:0 0 50px forestgreen; }
  75%{ text-shadow:0 0 50px cyan; }
}

h1:nth-child(2){ transform:translateZ(5px); }
h1:nth-child(3){ transform:translateZ(10px);}
h1:nth-child(4){ transform:translateZ(15px); }
h1:nth-child(5){ transform:translateZ(20px); }
h1:nth-child(6){ transform:translateZ(25px); }
h1:nth-child(7){ transform:translateZ(30px); }
h1:nth-child(8){ transform:translateZ(35px); }
h1:nth-child(9){ transform:translateZ(40px); }
h1:nth-child(10){ transform:translateZ(45px); }

h3:nth-child(2){ transform:translateZ(5px); }
h3:nth-child(3){ transform:translateZ(10px);}
h3:nth-child(4){ transform:translateZ(15px); }
h3:nth-child(5){ transform:translateZ(20px); }
h3:nth-child(6){ transform:translateZ(25px); }
h3:nth-child(7){ transform:translateZ(30px); }
h3:nth-child(8){ transform:translateZ(35px); }
h3:nth-child(9){ transform:translateZ(40px); }
h3:nth-child(10){ transform:translateZ(45px); }