@import url('https://fonts.googleapis.com/css?family=Anton|Roboto');


.word {
    font-family: 'Anton', sans-serif;
    perspective: 1000px;
    perspective-origin: 200px 40px;

}
.word span {
    cursor: pointer;
    display: inline-block;
    font-size: 40px;
    user-select: none;
    line-height: .8;
    -webkit-text-stroke: 1px black;
   
}
.word span:nth-child(1).active {
    animation: balance 1.5s ease-out;
    transform-origin: 0% 100% 0px;
}
@keyframes balance {
    0%, 100% {
        transform: rotate(0deg);
    }
   
    30%, 60% {
        transform: rotate(-45deg);
    }
}




.word span:nth-child(2).active {
    animation: shrinkjump 1s ease-in-out;
    transform-origin: bottom center;
}


@keyframes shrinkjump {
    10%, 35% {
        transform: scale(2, .2) translate(0, 0);
    }
   
    45%, 50% {
        transform: scale(1) translate(0, -150px);
    }
   
    80% {
        transform: scale(1) translate(0, 0);
    }
}




.word span:nth-child(3).active {
    animation: falling 2s ease-out;
    transform-origin: bottom center;
}


@keyframes falling {
    12% {
        transform: rotateX(240deg);
    }
   
    24% {
        transform: rotateX(150deg);
    }
   
    36% {
        transform: rotateX(200deg);
    }
   
    48% {
        transform: rotateX(175deg);
    }
   
    60%, 85% {
        transform: rotateX(180deg);
    }
   
    100% {
        transform: rotateX(0deg);
    }
}


.word span:nth-child(4).active {
    animation: rotate 1s ease-out;
}


@keyframes rotate {
    20%, 80% {
        transform: rotateY(180deg);
    }
   
    100% {
        transform: rotateY(360deg);
    }
}


.word span:nth-child(5).active {
    animation: toplong 1.5s linear;
}


@keyframes toplong {
    10%, 40% {
        transform: translateY(-48vh) scaleY(1);
    }
   
    90% {
        transform: translateY(-48vh) scaleY(4);
    }
}


.word span:nth-child(6).active {
    animation: balance 1.5s ease-out;
    transform-origin: 0% 100% 0px;
}


@keyframes balance {
    0%, 100% {
        transform: rotate(0deg);
    }
   
    30%, 60% {
        transform: rotate(-45deg);
    }
}


.word span:nth-child(7).active {
    animation: shrinkjump 1s ease-in-out;
    transform-origin: bottom center;
}


@keyframes shrinkjump {
    10%, 35% {
        transform: scale(2, .2) translate(0, 0);
    }
   
    45%, 50% {
        transform: scale(1) translate(0, -150px);
    }
   
    80% {
        transform: scale(1) translate(0, 0);
    }
}


.word span:nth-child(8).active {
    animation: falling 2s ease-out;
    transform-origin: bottom center;
}


@keyframes falling {
    12% {
        transform: rotateX(240deg);
    }
   
    24% {
        transform: rotateX(150deg);
    }
   
    36% {
        transform: rotateX(200deg);
    }
   
    48% {
        transform: rotateX(175deg);
    }
   
    60%, 85% {
        transform: rotateX(180deg);
    }
   
    100% {
        transform: rotateX(0deg);
    }
}


.word span:nth-child(9).active {
    animation: rotate 1s ease-out;
}


@keyframes rotate {
    20%, 80% {
        transform: rotateY(180deg);
    }
   
    100% {
        transform: rotateY(360deg);
    }
}


.word span:nth-child(10).active {
    animation: toplong 1.5s linear;
}


@keyframes toplong {
    10%, 40% {
        transform: translateY(-18vh) scaleY(1);
    }
   
    90% {
        transform: translateY(-18vh) scaleY(4);
    }
}


body {
  display: flex;
  font-family: 'Roboto', sans-serif;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  min-height: 100vh;
  margin: 0 20px;        
  gap: 60px;            
  background: #f4fafa;
  flex-wrap: wrap;  }


  .intro {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 20px;
      margin-top: 50px;
    }
.word {
  font-size: 48px;
  font-weight: bold;
  user-select: none;
  flex-shrink: 0;        
}


.welcome {
    width: 460px;
    padding: 20px;
    margin: 20px;
}


img {
  width: 110px;
  height: auto;
  border-radius: 8px;
  object-fit: cover;


  user-select: none;
  pointer-events: none;  
 
}




.container {
  display: flex;
  flex-direction: column;
  gap: 10px;            
  max-width: 360px;
  flex-shrink: 0;      
 
}




.container > div {
  display: flex;
  justify-content: center;
  gap: 10px;            
  flex-wrap: wrap;      
}


.btn {
  display: flex;
  flex-direction: column;
  align-items: center;    
  gap: 5px;              
  cursor: pointer;
  padding: 5px 5px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  user-select: none;
  width: 140px;          
  text-align: center;
  color: #333;
  font-weight: 600;
  font-size: 1rem;
}


.btn:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}
p {
    margin: 0;
   
}


a {
  text-decoration: none;
  color: #333;          
}



@media all and (max-width: 909px) {
   
    .intro {
        margin-top: 50px;
    }
    .welcome {
        padding: 5px;
        margin: 5px;
    }
   
}




@media all and (max-width: 495px) {
     .word {
    font-size: 28px;
  }

  .welcome {
	width: 100%;
	padding: 10px;
	margin: 10px;
  }


  .intro {
    padding: 10px;
    margin-top: 30px;
  }
}



@media all and (max-width: 390px) {
   
img {
  width: 90px;


}
p {
    font-size: 14px;
}

     .word {
    font-size: 18px;
  }
.btn {
 
  width: 130px;      
  font-size: 14px;
}


}