@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

body {
  max-width: 100%;
  min-height: 300px;
  height: 100vh;
  display: flex;
  gap: 50px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  background-color: Black;
  font-family: 'Poppins', sans-serif;


}

div {

  overflow: hidden;
  height: 70px;
  transform: scale(3);

}

.hello-container {
  transform: translateX(-100px);
  transform: scale(3);
}

/*70px => hidden ; 0px => shown*/
h1{
  transform: translateY(70px);
  font-size: 3em;
}

.hello {
  animation-name: slideUp;
  animation-duration: 1.5s;
  animation-fill-mode: both;
  animation-timing-function: ease-in;

}

.world {
  animation-name: slideUp;
  animation-duration: 1.5s;
  animation-delay: .7s;
  animation-fill-mode: both;
  animation-timing-function: ease-in;
}

.world {
}
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(70px)
  }

  to {
    opacity: 1;
    transform: translateY(-30px)
  }
}