birhtday 70

birhtday-70.markdown

birhtday 70

A Pen by Jordan on CodePen.

License.

index.html

<canvas id="canv"></canvas>
<div class="snowflakes">
  <div class="snowflake">
    <img src="https://proxy.everskies.com/a/https%3A%2F%2Fi.pinimg.com%2Foriginals%2F9d%2Ff5%2F2a%2F9df52a3aec306571d857441fa0f8cf83.gif" width="60" alt="9df52a3aec306571d857441fa0f8cf83.gif" />
    </div>
 <div class="snowflake">
    <img src="https://proxy.everskies.com/a/https%3A%2F%2Fi.pinimg.com%2Foriginals%2F9d%2Ff5%2F2a%2F9df52a3aec306571d857441fa0f8cf83.gif" width="50" alt="9df52a3aec306571d857441fa0f8cf83.gif" />
    </div>
 <div class="snowflake">
    <img src="https://proxy.everskies.com/a/https%3A%2F%2Fi.pinimg.com%2Foriginals%2F9d%2Ff5%2F2a%2F9df52a3aec306571d857441fa0f8cf83.gif" width="70" alt="9df52a3aec306571d857441fa0f8cf83.gif" />
    </div>
 <div class="snowflake">
    <img src="https://proxy.everskies.com/a/https%3A%2F%2Fi.pinimg.com%2Foriginals%2F9d%2Ff5%2F2a%2F9df52a3aec306571d857441fa0f8cf83.gif" width="50" alt="9df52a3aec306571d857441fa0f8cf83.gif" />
    </div>
 <div class="snowflake">
    <img src="https://proxy.everskies.com/a/https%3A%2F%2Fi.pinimg.com%2Foriginals%2F9d%2Ff5%2F2a%2F9df52a3aec306571d857441fa0f8cf83.gif" width="50" alt="9df52a3aec306571d857441fa0f8cf83.gif" />
    </div>
 <div class="snowflake">
    <img src="https://proxy.everskies.com/a/https%3A%2F%2Fi.pinimg.com%2Foriginals%2F9d%2Ff5%2F2a%2F9df52a3aec306571d857441fa0f8cf83.gif" width="50" alt="9df52a3aec306571d857441fa0f8cf83.gif" />
    </div>
<div class="snowflake">
    <img src="https://proxy.everskies.com/a/https%3A%2F%2Fimg.cloudygif.com%2Fsmall%2Ff3420fa09ea62f55.gif" width="90" alt="f3420fa09ea62f55.gif" />
    </div>
<div class="snowflake">
    <img src="https://stationeers-wiki.com/images/d/da/Flowers.gif" width="150" alt="f3420fa09ea62f55.gif" />
    </div>
<div class="snowflake">
    <img src="https://stationeers-wiki.com/images/d/da/Flowers.gif" width="260" alt="f3420fa09ea62f55.gif" />
    </div>
<div class="snowflake">
    <img src="https://stationeers-wiki.com/images/d/da/Flowers.gif" width="170" alt="f3420fa09ea62f55.gif" />
    </div>
<div class="snowflake">
    <img src="https://stationeers-wiki.com/images/d/da/Flowers.gif" width="190" alt="f3420fa09ea62f55.gif" />
    </div>
   </div>

<div class="msg">
<span title="H"></span>
<span title="A"></span>
<span title="P"></span>
<span title="i"></span>
<span title=" "></span>
<span title=" "></span>
<span title="7"></span>
<span title="d"></span>
  <br>
<span title=" "></span>
<span title=" "></span>
<span title="m"></span>
<span title="0"></span>
<span title="m"></span>
<span title="^"></span>
<span title="◡"></span>
<span title="^"></span>
</div>

script.babel

const res = Math.ceil(window.innerHeight / 60);
let w = Math.ceil(window.innerWidth / res);
let h = Math.ceil(window.innerHeight / res);
const $b = document.querySelector('body');
const $c = document.createElement('canvas');
const ctx = $c.getContext('2d');
$c.width = window.innerWidth;
$c.height = window.innerHeight;
$b.appendChild($c);

const speed = 0.0005;

function setSize () {
  w = Math.ceil(window.innerWidth / res);
  h = Math.ceil(window.innerHeight / res);
  $c.width = window.innerWidth;
  $c.height = window.innerHeight;
}

let progress = 0;

noise.seed(Math.random());

function doit () {
  progress += speed;
  for (let x = 0; x < w; x++) {
    for (let y = 0; y < h; y++) {
      const sim = noise.simplex3((progress + x) / (w * 1.5), progress + y / (h * 1.5), progress);
      //const per = noise.perlin3((progress + x) / (w * 1.25), progress + y / (h * 1.25), progress);
      ctx.fillStyle = `hsl(${(1360 * Math.abs(sim)) % 360},100%,73%)`;
      ctx.fillRect(x * res,y * res,res,res);
    }
  }
  requestAnimationFrame(doit);
}

doit();

document.addEventListener('click', function(){
  noise.seed(Math.random());
});


setSize();

window.addEventListener('resize', setSize);

scripts

<script src="https://cdn.rawgit.com/josephg/noisejs/master/perlin.js"></script>

style.scss

@import url(https://fonts.googleapis.com/css?family=PT+Sans:700|Pacifico|Changa+One);

canvas{
  z-index:99;
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background: linear-gradient(#B7B0E3, #FFD3D6);  
}

body{
  background:transparent;
}
/* customizable snowflake styling */
.snowflake {
  color: #fff;
  font-size: 1em;
  font-family: Arial;
  text-shadow: 0 0 1px #000;
}

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%{-webkit-transform:translateX(0px);transform:translateX(0px)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@keyframes snowflakes-fall{0%{top:-40%}100%{top:100%}}@keyframes snowflakes-shake{0%{transform:translateX(0px)}50%{transform:translateX(80px)}100%{transform:translateX(0px)}}.snowflake{position:fixed;top:-40%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}
/* Demo Purpose Only*/
.demo {
  font-family: 'Raleway', sans-serif;
	color:#fff;
    display: block;
    margin: 0 auto;
    padding: 15px 0;
    text-align: center;
}
.demo a{
  font-family: 'Raleway', sans-serif;
color: #000;		
}

body {
  overflow: hidden;
}
.page-bg{
  z-index: 70;
}
.msg{
  z-index: 70;
}
h2 {
  text-shadow: 3px 3px #ff0000;  
  -webkit-text-stroke: 2px black;
  position: absolute;
  z-index: 2;
  margin: 0;
  font-size: 14.333vw;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  color: #00f;
  mix-blend-mode: difference;
  background: #000;
  line-height: 1;
  padding: 0.25em;
}
h1 {
  text-shadow: 3px 3px #ff0000;  
  -webkit-text-stroke: 2px black;
  position: absolute;
  z-index: 2;
  margin: 0;
  font-size: 43.333vw;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  color: #00f;
  mix-blend-mode: difference;
  background: #fff;
  line-height: 1;
  padding: 0.25em;
}
canvas {
  z-index: 1;
  position: absolute;
}


.msg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  line-height: 200px;
  margin: -100px 0 0 -300px;
  text-align: center;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
  -webkit-transform-origin: 50% 80%;
  -moz-transform-origin: 50% 80%;
  -o-transform-origin: 50% 80%;
  -ms-transform-origin: 50% 80%;
  transform-origin: 50% 80%;
  transform-type: preserve-3d;
}
.msg span {
  display: inline-block;
  font: 110px serif;
  position: relative;
  border-bottom: 5px solid #000;
  border-top: 5px solid #000;
  -webkit-box-shadow: 0 0 25px rgba(0,0,0,0.3);
  box-shadow: 0 0 25px rgba(0,0,0,0.3);
  background: #fff;
  -webkit-animation: pulsate 3s infinite linear;
  -moz-animation: pulsate 3s infinite linear;
  -o-animation: pulsate 3s infinite linear;
  -ms-animation: pulsate 3s infinite linear;
  animation: pulsate 3s infinite linear;
}
.msg span:nth-of-type(1) {
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -o-animation-delay: 1s;
  -ms-animation-delay: 1s;
  animation-delay: 1s;
}
.msg span:nth-of-type(2) {
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -o-animation-delay: 2s;
  -ms-animation-delay: 2s;
  animation-delay: 2s;
}
.msg span:nth-of-type(3) {
  -webkit-animation-delay: 3s;
  -moz-animation-delay: 3s;
  -o-animation-delay: 3s;
  -ms-animation-delay: 3s;
  animation-delay: 3s;
}
.msg span:nth-of-type(4) {
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
  -o-animation-delay: 4s;
  -ms-animation-delay: 4s;
  animation-delay: 4s;
}
.msg span:nth-of-type(5) {
  -webkit-animation-delay: 5s;
  -moz-animation-delay: 5s;
  -o-animation-delay: 5s;
  -ms-animation-delay: 5s;
  animation-delay: 5s;
}
.msg span:nth-of-type(6) {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s;
}
.msg span:nth-of-type(7) {
  -webkit-animation-delay: 7s;
  -moz-animation-delay: 7s;
  -o-animation-delay: 7s;
  -ms-animation-delay: 7s;
  animation-delay: 7s;
}
.msg span:nth-of-type(8) {
  -webkit-animation-delay: 8s;
  -moz-animation-delay: 8s;
  -o-animation-delay: 8s;
  -ms-animation-delay: 8s;
  animation-delay: 8s;
}
.msg span:nth-of-type(9) {
  -webkit-animation-delay: 9s;
  -moz-animation-delay: 9s;
  -o-animation-delay: 9s;
  -ms-animation-delay: 9s;
  animation-delay: 9s;
}
.msg span:nth-of-type(10) {
  -webkit-animation-delay: 10s;
  -moz-animation-delay: 10s;
  -o-animation-delay: 10s;
  -ms-animation-delay: 10s;
  animation-delay: 10s;
}
.msg span:nth-of-type(11) {
  -webkit-animation-delay: 11s;
  -moz-animation-delay: 11s;
  -o-animation-delay: 11s;
  -ms-animation-delay: 11s;
  animation-delay: 11s;
}
.msg span:nth-of-type(12) {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -o-animation-delay: 12s;
  -ms-animation-delay: 12s;
  animation-delay: 12s;
}
.msg span:nth-of-type(13) {
  -webkit-animation-delay: 13s;
  -moz-animation-delay: 13s;
  -o-animation-delay: 13s;
  -ms-animation-delay: 13s;
  animation-delay: 13s;
}
.msg span:nth-of-type(14) {
  -webkit-animation-delay: 14s;
  -moz-animation-delay: 14s;
  -o-animation-delay: 14s;
  -ms-animation-delay: 14s;
  animation-delay: 14s;
}
.msg span:nth-of-type(15) {
  -webkit-animation-delay: 15s;
  -moz-animation-delay: 15s;
  -o-animation-delay: 15s;
  -ms-animation-delay: 15s;
  animation-delay: 15s;
}
.msg span:nth-of-type(16) {
  -webkit-animation-delay: 16s;
  -moz-animation-delay: 16s;
  -o-animation-delay: 16s;
  -ms-animation-delay: 16s;
  animation-delay: 16s;
}
.msg span:nth-of-type(17) {
  -webkit-animation-delay: 17s;
  -moz-animation-delay: 17s;
  -o-animation-delay: 17s;
  -ms-animation-delay: 17s;
  animation-delay: 17s;
}
.msg span:nth-of-type(18) {
  -webkit-animation-delay: 18s;
  -moz-animation-delay: 18s;
  -o-animation-delay: 18s;
  -ms-animation-delay: 18s;
  animation-delay: 18s;
}
.msg span:nth-of-type(19) {
  -webkit-animation-delay: 19s;
  -moz-animation-delay: 19s;
  -o-animation-delay: 19s;
  -ms-animation-delay: 19s;
  animation-delay: 19s;
}
.msg span:nth-of-type(20) {
  -webkit-animation-delay: 20s;
  -moz-animation-delay: 20s;
  -o-animation-delay: 20s;
  -ms-animation-delay: 20s;
  animation-delay: 20s;
}
.msg span:nth-of-type(21) {
  -webkit-animation-delay: 21s;
  -moz-animation-delay: 21s;
  -o-animation-delay: 21s;
  -ms-animation-delay: 21s;
  animation-delay: 21s;
}
.msg span:nth-of-type(22) {
  -webkit-animation-delay: 22s;
  -moz-animation-delay: 22s;
  -o-animation-delay: 22s;
  -ms-animation-delay: 22s;
  animation-delay: 22s;
}
.msg span:nth-of-type(23) {
  -webkit-animation-delay: 23s;
  -moz-animation-delay: 23s;
  -o-animation-delay: 23s;
  -ms-animation-delay: 23s;
  animation-delay: 23s;
}
.msg span:nth-of-type(24) {
  -webkit-animation-delay: 24s;
  -moz-animation-delay: 24s;
  -o-animation-delay: 24s;
  -ms-animation-delay: 24s;
  animation-delay: 24s;
}
.msg span:nth-of-type(25) {
  -webkit-animation-delay: 25s;
  -moz-animation-delay: 25s;
  -o-animation-delay: 25s;
  -ms-animation-delay: 25s;
  animation-delay: 25s;
}
.msg span:nth-of-type(26) {
  -webkit-animation-delay: 26s;
  -moz-animation-delay: 26s;
  -o-animation-delay: 26s;
  -ms-animation-delay: 26s;
  animation-delay: 26s;
}
.msg span:nth-of-type(27) {
  -webkit-animation-delay: 27s;
  -moz-animation-delay: 27s;
  -o-animation-delay: 27s;
  -ms-animation-delay: 27s;
  animation-delay: 27s;
}
.msg span:nth-of-type(28) {
  -webkit-animation-delay: 28s;
  -moz-animation-delay: 28s;
  -o-animation-delay: 28s;
  -ms-animation-delay: 28s;
  animation-delay: 28s;
}
.msg span:nth-of-type(29) {
  -webkit-animation-delay: 29s;
  -moz-animation-delay: 29s;
  -o-animation-delay: 29s;
  -ms-animation-delay: 29s;
  animation-delay: 29s;
}
.msg span:nth-of-type(30) {
  -webkit-animation-delay: 30s;
  -moz-animation-delay: 30s;
  -o-animation-delay: 30s;
  -ms-animation-delay: 30s;
  animation-delay: 30s;
}
.msg span:nth-of-type(31) {
  -webkit-animation-delay: 31s;
  -moz-animation-delay: 31s;
  -o-animation-delay: 31s;
  -ms-animation-delay: 31s;
  animation-delay: 31s;
}
.msg span:nth-of-type(32) {
  -webkit-animation-delay: 32s;
  -moz-animation-delay: 32s;
  -o-animation-delay: 32s;
  -ms-animation-delay: 32s;
  animation-delay: 32s;
}
.msg span:nth-of-type(33) {
  -webkit-animation-delay: 33s;
  -moz-animation-delay: 33s;
  -o-animation-delay: 33s;
  -ms-animation-delay: 33s;
  animation-delay: 33s;
}
.msg span:nth-of-type(34) {
  -webkit-animation-delay: 34s;
  -moz-animation-delay: 34s;
  -o-animation-delay: 34s;
  -ms-animation-delay: 34s;
  animation-delay: 34s;
}
.msg span:nth-of-type(35) {
  -webkit-animation-delay: 35s;
  -moz-animation-delay: 35s;
  -o-animation-delay: 35s;
  -ms-animation-delay: 35s;
  animation-delay: 35s;
}
.msg span:nth-of-type(36) {
  -webkit-animation-delay: 36s;
  -moz-animation-delay: 36s;
  -o-animation-delay: 36s;
  -ms-animation-delay: 36s;
  animation-delay: 36s;
}
.msg span:nth-of-type(37) {
  -webkit-animation-delay: 37s;
  -moz-animation-delay: 37s;
  -o-animation-delay: 37s;
  -ms-animation-delay: 37s;
  animation-delay: 37s;
}
.msg span:nth-of-type(38) {
  -webkit-animation-delay: 38s;
  -moz-animation-delay: 38s;
  -o-animation-delay: 38s;
  -ms-animation-delay: 38s;
  animation-delay: 38s;
}
.msg span:nth-of-type(39) {
  -webkit-animation-delay: 39s;
  -moz-animation-delay: 39s;
  -o-animation-delay: 39s;
  -ms-animation-delay: 39s;
  animation-delay: 39s;
}
.msg span:nth-of-type(40) {
  -webkit-animation-delay: 40s;
  -moz-animation-delay: 40s;
  -o-animation-delay: 40s;
  -ms-animation-delay: 40s;
  animation-delay: 40s;
}
.msg span:nth-of-type(41) {
  -webkit-animation-delay: 41s;
  -moz-animation-delay: 41s;
  -o-animation-delay: 41s;
  -ms-animation-delay: 41s;
  animation-delay: 41s;
}
.msg span:nth-of-type(42) {
  -webkit-animation-delay: 42s;
  -moz-animation-delay: 42s;
  -o-animation-delay: 42s;
  -ms-animation-delay: 42s;
  animation-delay: 42s;
}
.msg span:nth-of-type(43) {
  -webkit-animation-delay: 43s;
  -moz-animation-delay: 43s;
  -o-animation-delay: 43s;
  -ms-animation-delay: 43s;
  animation-delay: 43s;
}
.msg span:nth-of-type(44) {
  -webkit-animation-delay: 44s;
  -moz-animation-delay: 44s;
  -o-animation-delay: 44s;
  -ms-animation-delay: 44s;
  animation-delay: 44s;
}
.msg span:nth-of-type(45) {
  -webkit-animation-delay: 45s;
  -moz-animation-delay: 45s;
  -o-animation-delay: 45s;
  -ms-animation-delay: 45s;
  animation-delay: 45s;
}
.msg span:nth-of-type(46) {
  -webkit-animation-delay: 46s;
  -moz-animation-delay: 46s;
  -o-animation-delay: 46s;
  -ms-animation-delay: 46s;
  animation-delay: 46s;
}
.msg span:nth-of-type(47) {
  -webkit-animation-delay: 47s;
  -moz-animation-delay: 47s;
  -o-animation-delay: 47s;
  -ms-animation-delay: 47s;
  animation-delay: 47s;
}
.msg span:nth-of-type(48) {
  -webkit-animation-delay: 48s;
  -moz-animation-delay: 48s;
  -o-animation-delay: 48s;
  -ms-animation-delay: 48s;
  animation-delay: 48s;
}
.msg span:nth-of-type(49) {
  -webkit-animation-delay: 49s;
  -moz-animation-delay: 49s;
  -o-animation-delay: 49s;
  -ms-animation-delay: 49s;
  animation-delay: 49s;
}
.msg span:nth-of-type(50) {
  -webkit-animation-delay: 50s;
  -moz-animation-delay: 50s;
  -o-animation-delay: 50s;
  -ms-animation-delay: 50s;
  animation-delay: 50s;
}
.msg span:nth-of-type(51) {
  -webkit-animation-delay: 51s;
  -moz-animation-delay: 51s;
  -o-animation-delay: 51s;
  -ms-animation-delay: 51s;
  animation-delay: 51s;
}
.msg span:nth-of-type(52) {
  -webkit-animation-delay: 52s;
  -moz-animation-delay: 52s;
  -o-animation-delay: 52s;
  -ms-animation-delay: 52s;
  animation-delay: 52s;
}
.msg span:nth-of-type(53) {
  -webkit-animation-delay: 53s;
  -moz-animation-delay: 53s;
  -o-animation-delay: 53s;
  -ms-animation-delay: 53s;
  animation-delay: 53s;
}
.msg span:nth-of-type(54) {
  -webkit-animation-delay: 54s;
  -moz-animation-delay: 54s;
  -o-animation-delay: 54s;
  -ms-animation-delay: 54s;
  animation-delay: 54s;
}
.msg span:nth-of-type(55) {
  -webkit-animation-delay: 55s;
  -moz-animation-delay: 55s;
  -o-animation-delay: 55s;
  -ms-animation-delay: 55s;
  animation-delay: 55s;
}
.msg span:nth-of-type(56) {
  -webkit-animation-delay: 56s;
  -moz-animation-delay: 56s;
  -o-animation-delay: 56s;
  -ms-animation-delay: 56s;
  animation-delay: 56s;
}
.msg span:nth-of-type(57) {
  -webkit-animation-delay: 57s;
  -moz-animation-delay: 57s;
  -o-animation-delay: 57s;
  -ms-animation-delay: 57s;
  animation-delay: 57s;
}
.msg span:nth-of-type(58) {
  -webkit-animation-delay: 58s;
  -moz-animation-delay: 58s;
  -o-animation-delay: 58s;
  -ms-animation-delay: 58s;
  animation-delay: 58s;
}
.msg span:nth-of-type(59) {
  -webkit-animation-delay: 59s;
  -moz-animation-delay: 59s;
  -o-animation-delay: 59s;
  -ms-animation-delay: 59s;
  animation-delay: 59s;
}
.msg span:nth-of-type(60) {
  -webkit-animation-delay: 60s;
  -moz-animation-delay: 60s;
  -o-animation-delay: 60s;
  -ms-animation-delay: 60s;
  animation-delay: 60s;
}
.msg span:nth-of-type(61) {
  -webkit-animation-delay: 61s;
  -moz-animation-delay: 61s;
  -o-animation-delay: 61s;
  -ms-animation-delay: 61s;
  animation-delay: 61s;
}
.msg span:nth-of-type(62) {
  -webkit-animation-delay: 62s;
  -moz-animation-delay: 62s;
  -o-animation-delay: 62s;
  -ms-animation-delay: 62s;
  animation-delay: 62s;
}
.msg span:nth-of-type(63) {
  -webkit-animation-delay: 63s;
  -moz-animation-delay: 63s;
  -o-animation-delay: 63s;
  -ms-animation-delay: 63s;
  animation-delay: 63s;
}
.msg span:nth-of-type(64) {
  -webkit-animation-delay: 64s;
  -moz-animation-delay: 64s;
  -o-animation-delay: 64s;
  -ms-animation-delay: 64s;
  animation-delay: 64s;
}
.msg span:nth-of-type(65) {
  -webkit-animation-delay: 65s;
  -moz-animation-delay: 65s;
  -o-animation-delay: 65s;
  -ms-animation-delay: 65s;
  animation-delay: 65s;
}
.msg span:nth-of-type(66) {
  -webkit-animation-delay: 66s;
  -moz-animation-delay: 66s;
  -o-animation-delay: 66s;
  -ms-animation-delay: 66s;
  animation-delay: 66s;
}
.msg span:nth-of-type(67) {
  -webkit-animation-delay: 67s;
  -moz-animation-delay: 67s;
  -o-animation-delay: 67s;
  -ms-animation-delay: 67s;
  animation-delay: 67s;
}
.msg span:nth-of-type(68) {
  -webkit-animation-delay: 68s;
  -moz-animation-delay: 68s;
  -o-animation-delay: 68s;
  -ms-animation-delay: 68s;
  animation-delay: 68s;
}
.msg span:nth-of-type(69) {
  -webkit-animation-delay: 69s;
  -moz-animation-delay: 69s;
  -o-animation-delay: 69s;
  -ms-animation-delay: 69s;
  animation-delay: 69s;
}
.msg span:nth-of-type(70) {
  -webkit-animation-delay: 70s;
  -moz-animation-delay: 70s;
  -o-animation-delay: 70s;
  -ms-animation-delay: 70s;
  animation-delay: 70s;
}
.msg span:nth-of-type(71) {
  -webkit-animation-delay: 71s;
  -moz-animation-delay: 71s;
  -o-animation-delay: 71s;
  -ms-animation-delay: 71s;
  animation-delay: 71s;
}
.msg span:nth-of-type(72) {
  -webkit-animation-delay: 72s;
  -moz-animation-delay: 72s;
  -o-animation-delay: 72s;
  -ms-animation-delay: 72s;
  animation-delay: 72s;
}
.msg span:nth-of-type(73) {
  -webkit-animation-delay: 73s;
  -moz-animation-delay: 73s;
  -o-animation-delay: 73s;
  -ms-animation-delay: 73s;
  animation-delay: 73s;
}
.msg span:nth-of-type(74) {
  -webkit-animation-delay: 74s;
  -moz-animation-delay: 74s;
  -o-animation-delay: 74s;
  -ms-animation-delay: 74s;
  animation-delay: 74s;
}
.msg span:nth-of-type(75) {
  -webkit-animation-delay: 75s;
  -moz-animation-delay: 75s;
  -o-animation-delay: 75s;
  -ms-animation-delay: 75s;
  animation-delay: 75s;
}
.msg span:nth-of-type(76) {
  -webkit-animation-delay: 76s;
  -moz-animation-delay: 76s;
  -o-animation-delay: 76s;
  -ms-animation-delay: 76s;
  animation-delay: 76s;
}
.msg span:nth-of-type(77) {
  -webkit-animation-delay: 77s;
  -moz-animation-delay: 77s;
  -o-animation-delay: 77s;
  -ms-animation-delay: 77s;
  animation-delay: 77s;
}
.msg span:nth-of-type(78) {
  -webkit-animation-delay: 78s;
  -moz-animation-delay: 78s;
  -o-animation-delay: 78s;
  -ms-animation-delay: 78s;
  animation-delay: 78s;
}
.msg span:nth-of-type(79) {
  -webkit-animation-delay: 79s;
  -moz-animation-delay: 79s;
  -o-animation-delay: 79s;
  -ms-animation-delay: 79s;
  animation-delay: 79s;
}
.msg span:nth-of-type(80) {
  -webkit-animation-delay: 80s;
  -moz-animation-delay: 80s;
  -o-animation-delay: 80s;
  -ms-animation-delay: 80s;
  animation-delay: 80s;
}
.msg span:nth-of-type(81) {
  -webkit-animation-delay: 81s;
  -moz-animation-delay: 81s;
  -o-animation-delay: 81s;
  -ms-animation-delay: 81s;
  animation-delay: 81s;
}
.msg span:nth-of-type(82) {
  -webkit-animation-delay: 82s;
  -moz-animation-delay: 82s;
  -o-animation-delay: 82s;
  -ms-animation-delay: 82s;
  animation-delay: 82s;
}
.msg span:nth-of-type(83) {
  -webkit-animation-delay: 83s;
  -moz-animation-delay: 83s;
  -o-animation-delay: 83s;
  -ms-animation-delay: 83s;
  animation-delay: 83s;
}
.msg span:nth-of-type(84) {
  -webkit-animation-delay: 84s;
  -moz-animation-delay: 84s;
  -o-animation-delay: 84s;
  -ms-animation-delay: 84s;
  animation-delay: 84s;
}
.msg span:nth-of-type(85) {
  -webkit-animation-delay: 85s;
  -moz-animation-delay: 85s;
  -o-animation-delay: 85s;
  -ms-animation-delay: 85s;
  animation-delay: 85s;
}
.msg span:nth-of-type(86) {
  -webkit-animation-delay: 86s;
  -moz-animation-delay: 86s;
  -o-animation-delay: 86s;
  -ms-animation-delay: 86s;
  animation-delay: 86s;
}
.msg span:nth-of-type(87) {
  -webkit-animation-delay: 87s;
  -moz-animation-delay: 87s;
  -o-animation-delay: 87s;
  -ms-animation-delay: 87s;
  animation-delay: 87s;
}
.msg span:nth-of-type(88) {
  -webkit-animation-delay: 88s;
  -moz-animation-delay: 88s;
  -o-animation-delay: 88s;
  -ms-animation-delay: 88s;
  animation-delay: 88s;
}
.msg span:nth-of-type(89) {
  -webkit-animation-delay: 89s;
  -moz-animation-delay: 89s;
  -o-animation-delay: 89s;
  -ms-animation-delay: 89s;
  animation-delay: 89s;
}
.msg span:nth-of-type(90) {
  -webkit-animation-delay: 90s;
  -moz-animation-delay: 90s;
  -o-animation-delay: 90s;
  -ms-animation-delay: 90s;
  animation-delay: 90s;
}
.msg span:nth-of-type(91) {
  -webkit-animation-delay: 91s;
  -moz-animation-delay: 91s;
  -o-animation-delay: 91s;
  -ms-animation-delay: 91s;
  animation-delay: 91s;
}
.msg span:nth-of-type(92) {
  -webkit-animation-delay: 92s;
  -moz-animation-delay: 92s;
  -o-animation-delay: 92s;
  -ms-animation-delay: 92s;
  animation-delay: 92s;
}
.msg span:nth-of-type(93) {
  -webkit-animation-delay: 93s;
  -moz-animation-delay: 93s;
  -o-animation-delay: 93s;
  -ms-animation-delay: 93s;
  animation-delay: 93s;
}
.msg span:nth-of-type(94) {
  -webkit-animation-delay: 94s;
  -moz-animation-delay: 94s;
  -o-animation-delay: 94s;
  -ms-animation-delay: 94s;
  animation-delay: 94s;
}
.msg span:nth-of-type(95) {
  -webkit-animation-delay: 95s;
  -moz-animation-delay: 95s;
  -o-animation-delay: 95s;
  -ms-animation-delay: 95s;
  animation-delay: 95s;
}
.msg span:nth-of-type(96) {
  -webkit-animation-delay: 96s;
  -moz-animation-delay: 96s;
  -o-animation-delay: 96s;
  -ms-animation-delay: 96s;
  animation-delay: 96s;
}
.msg span:nth-of-type(97) {
  -webkit-animation-delay: 97s;
  -moz-animation-delay: 97s;
  -o-animation-delay: 97s;
  -ms-animation-delay: 97s;
  animation-delay: 97s;
}
.msg span:nth-of-type(98) {
  -webkit-animation-delay: 98s;
  -moz-animation-delay: 98s;
  -o-animation-delay: 98s;
  -ms-animation-delay: 98s;
  animation-delay: 98s;
}
.msg span:nth-of-type(99) {
  -webkit-animation-delay: 99s;
  -moz-animation-delay: 99s;
  -o-animation-delay: 99s;
  -ms-animation-delay: 99s;
  animation-delay: 99s;
}
.msg span:nth-of-type(100) {
  -webkit-animation-delay: 100s;
  -moz-animation-delay: 100s;
  -o-animation-delay: 100s;
  -ms-animation-delay: 100s;
  animation-delay: 100s;
}
.msg span:first-of-type {
  border-left: 5px solid #000;
}
.msg span:last-of-type {
  border-right: 5px solid #000;
}
.msg span:nth-of-type(even) {
  -webkit-transform: scale(1.1) rotate(2deg);
  -moz-transform: scale(1.1) rotate(2deg);
  -o-transform: scale(1.1) rotate(2deg);
  -ms-transform: scale(1.1) rotate(2deg);
  transform: scale(1.1) rotate(2deg);
}
.msg span:nth-of-type(odd) {
  -webkit-transform: rotate(-2deg);
  -moz-transform: rotate(-2deg);
  -o-transform: rotate(-2deg);
  -ms-transform: rotate(-2deg);
  transform: rotate(-2deg);
}
.msg span:before {
  display: block;
  content: attr(title);
}
.msg span:after {
  content: attr(title);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.15;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
  filter: alpha(opacity=15);
  -webkit-transform-origin: 50% 80%;
  -moz-transform-origin: 50% 80%;
  -o-transform-origin: 50% 80%;
  -ms-transform-origin: 50% 80%;
  transform-origin: 50% 80%;
  transform-type: preserve-3d;
  -webkit-transform: rotateX(50deg);
  -moz-transform: rotateX(50deg);
  -o-transform: rotateX(50deg);
  -ms-transform: rotateX(50deg);
  transform: rotateX(50deg);
  text-shadow: 0 0 5px #000;
}