/* SmartPhone */
@media only screen and (max-width: 600px) {
  html {
    font-size: 100%;
  }
}
/* animation */
.header {
  animation-name: moveInUp;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
}
.clue {
  animation-name: moveInRight;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
}
.hint {
  animation-name: moveInLeft;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
}
.lives {
  animation-name: moveInRight;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
}
.score {
  animation-name: moveInLeft;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
}
.tutorial {
  animation-name: moveInDown;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
}
@keyframes moveInUp {
  0% {
    opacity: 0;
    transform: translateY(-5rem);
  }
  80% {
    transform: translateY(1rem);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes moveInDown {
  0% {
    opacity: 0;
    transform: translateY(10rem);
  }
  80% {
    transform: translateY(-1rem);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-10rem);
  }
  80% {
    transform: translateX(1rem);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(10rem);
  }
  80% {
    transform: translateX(-1rem);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}