@import url(https://fonts.googleapis.com/css?family=Signika:700,300,600);

.header h1 {
    font: bold 3.5vw/1.2 'Signika', sans-serif;
    /* user-select: none; */
    text-align: center; 
    
}

.header h1 span { display:inline-block; animation:float .2s ease-in-out; }
.header h1 span { animation:bounce .6s; }

@keyframes float {
  0%,100%{ transform:none; }
  33%{ transform:translateY(-1px) rotate(-2deg); }
  66%{ transform:translateY(1px) rotate(2deg); }
}

@keyframes bounce {
    0%, 100% { transform: translate(0); }
    25% { transform: rotateX(20deg) translateY(2px) rotate(-3deg); }
    50% { transform: translateY(-20px) rotate(3deg) scale(1.1); }
}

.header h1 span:nth-child(4n) {
    color: hsl(50, 75%, 55%);
    text-shadow: 1px 1px hsl(50, 75%, 45%), 2px 2px hsl(50, 45%, 45%), 3px 3px hsl(50, 45%, 45%), 4px 4px hsl(50, 75%, 45%);
}

.header h1 span:nth-child(4n-1) {
    color: hsl(135, 35%, 55%);
    text-shadow: 1px 1px hsl(135, 35%, 45%), 2px 2px hsl(135, 35%, 45%), 3px 3px hsl(135, 35%, 45%), 4px 4px hsl(135, 35%, 45%);
}

.header h1 span:nth-child(4n-2) {
    color: hsl(155, 35%, 60%);
    text-shadow: 1px 1px hsl(155, 25%, 50%), 2px 2px hsl(155, 25%, 50%), 3px 3px hsl(155, 25%, 50%), 4px 4px hsl(140, 25%, 50%);
}

.header h1 span:nth-child(4n-3) {
    color: hsl(30, 65%, 60%);
    text-shadow: 1px 1px hsl(30, 45%, 50%), 2px 2px hsl(30, 45%, 50%), 3px 3px hsl(30, 45%, 50%), 4px 4px hsl(30, 45%, 50%);
}

.header h1 span:nth-child(2) { animation-delay: .05s; }
.header h1 span:nth-child(3) { animation-delay: .1s; }
.header h1 span:nth-child(4) { animation-delay: .15s; }
.header h1 span:nth-child(5) { animation-delay: .2s; }
.header h1 span:nth-child(6) { animation-delay: .25s; }
.header h1 span:nth-child(7) { animation-delay: .3s; }
.header h1 span:nth-child(8) { animation-delay: .35s; }
.header h1 span:nth-child(9) { animation-delay: .4s; }
.header h1 span:nth-child(10) { animation-delay: .45s; }
.header h1 span:nth-child(11) { animation-delay: .5s; }
.header h1 span:nth-child(12) { animation-delay: .55s; }
.header h1 span:nth-child(13) { animation-delay: .6s; }
.header h1 span:nth-child(14) { animation-delay: .65s; }


@media (max-width: 768px) {
  .header h1 {
    font: bold 15vw/1.6 'Signika', sans-serif;  
    align-items: center;
  }
}