body{
  margin: 0;
  animation: 5s bodyAnime forwards;
}
@keyframes bodyAnime{
  75%{
    opacity: 1;
    visibility: hidden;
  }
  100%{
    opacity: 0;
    visibility: visible;
  }
}
.blackback{
width: 100vw;
height: 100vh;
background-color: #222;
}
.center{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

h2{
  font-size: 15px;
  color: white;
  font-family: 'Noto Sans JP','Comfortaa';
}
h2 span{
  transform: translateY(100%);
  display: inline-block;
  opacity: 0;
}
h2 span:nth-of-type(1){
  animation: 1s 1s topAnime forwards;
}
h2 span:nth-of-type(2){
  animation: 1s 1.1s topAnime forwards;
}
h2 span:nth-of-type(3){
  animation: 1s 1.2s topAnime forwards;
}
h2 span:nth-of-type(4){
  animation: 1s 1.3s topAnime forwards;
}
h2 span:nth-of-type(5){
  animation: 1s 1.4s topAnime forwards;
}
h2 span:nth-of-type(6){
  animation: 1s 1.5s topAnime forwards;
}
h2 span:nth-of-type(7){
  animation: 1s 1.6s topAnime forwards;
}
h2 span:nth-of-type(8){
  animation: 1s 1.7s topAnime forwards;
}
h2 span:nth-of-type(9){
  animation: 1s 1.8s topAnime forwards;
}
h2 span:nth-of-type(10){
  animation: 1s 1.9s topAnime forwards;
}
h2 span:nth-of-type(11){
  animation: 1s 2s topAnime forwards;
}
h2 span:nth-of-type(12){
  animation: 1s 2.1s topAnime forwards;
}
h2 span:nth-of-type(13){
  animation: 1s 2.2s topAnime forwards;
}
h2 span:nth-of-type(14){
  animation: 1s 2.3s topAnime forwards;
}
@keyframes topAnime{
  30%{
    opacity: 0;
  }
  100%{
    opacity: 1;
    transform: translateY(0);
  }
}
@media screen and (min-width:800px){
  .center span{
    font-size: 2rem;
  }
}