@import url("fonts.scss");


h1 {
    font-size: 5em;
    font: bold 2.5vw/1.6 'Signika', sans-serif;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

h1 span {
    display: inline-block;
    -webkit-animation: float .2s ease-in-out infinite;
    animation: float .2s ease-in-out infinite;
}

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

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

body:hover span {
    -webkit-animation: bounce .6s;
    animation: bounce .6s;
}

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

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

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%);
}

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%);
}

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%);
}

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%);
}

h1 span:nth-child(2) {
    -webkit-animation-delay: .05s;
    animation-delay: .05s;
}

h1 span:nth-child(3) {
    -webkit-animation-delay: .1s;
    animation-delay: .1s;
}

h1 span:nth-child(4) {
    -webkit-animation-delay: .15s;
    animation-delay: .15s;
}

h1 span:nth-child(5) {
    -webkit-animation-delay: .2s;
    animation-delay: .2s;
}

h1 span:nth-child(6) {
    -webkit-animation-delay: .25s;
    animation-delay: .25s;
}

h1 span:nth-child(7) {
    -webkit-animation-delay: .3s;
    animation-delay: .3s;
}

h1 span:nth-child(8) {
    -webkit-animation-delay: .35s;
    animation-delay: .35s;
}

h1 span:nth-child(9) {
    -webkit-animation-delay: .4s;
    animation-delay: .4s;
}

h1 span:nth-child(10) {
    -webkit-animation-delay: .45s;
    animation-delay: .45s;
}

h1 span:nth-child(11) {
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
}

h1 span:nth-child(12) {
    -webkit-animation-delay: .55s;
    animation-delay: .55s;
}

h1 span:nth-child(13) {
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
}

h1 span:nth-child(14) {
    -webkit-animation-delay: .65s;
    animation-delay: .65s;
}
