body {
  height: 100dvh;
  width: 100dvw;
  margin: 0; 
  overflow: hidden;
  background-image: url(./img/pink-pattern.webp);
  background-size: 300%;
}

.letter {
  width: 30vw;
  min-width: 300px;
  height: auto;
  margin: auto;
  transform-origin: center;
  position: fixed;
  right:1px;
  left:1px;
  top: -600px;

  animation-delay: 1s;
  animation-name: letter-falling;
  animation-duration: 6s;
}

.container {
  height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  color:transparent;
  background-color: white;
  max-height: 10px;
  padding: 10px 40px;
  margin: 10px;
  border-radius: 10px;
  font-size: clamp(14px,2dvw,22px);
  position: relative;

  animation-name: text-show;
  animation-delay: 9s;
  animation-duration: 5s;
  animation-fill-mode: forwards;
}

.move-text {
  position: fixed;
  transform: translateY(60dvh);
  top: 60dvh;
  animation-name: text-up;
  animation-delay: 6s;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

h6 {
  margin: 5px;
  margin-bottom: 10px;
}

button {
  margin-left: 10px;
  animation-name: text-show-button;
  animation-delay: 9s;
  animation-duration: 5s;
  animation-fill-mode: forwards;
  font-size: 28px;

  background-color: transparent;
  color:transparent;
  border-color: transparent;
}

@keyframes letter-falling {
  0%{
    top: -600px;
    rotate: 0deg;
  }  
  40%{
    top: 40vh;
    rotate: 60deg;

  }  
  100%{
    top: 100dvh;
    rotate: 45deg;
  } 
}

@keyframes text-show {
  0%{
  }
  100%{
    max-height: 5000px;
    color:black;
  }
}

@keyframes text-show-button {
  0%{
  }
  100%{
    color:black;
    border-color: pink;
  }
}

@keyframes text-up {
  0%{
  }
  100%{
    transform: translateY(-40dvh);
  }
}