/* Copyright Amazon.com Inc. or its affiliates. */
/* SPDX-License-Identifier: Apache-2.0 */

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

html, body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
  text-align: center;
  background: beige;
  overflow: hidden;
}

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

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

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

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

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