body {
  margin: 0;
  padding: 0;
  background-color: gainsboro;
  color: white;
  height: 100vh;
  display: flex;
  justify-content: center;
  overflow: hidden;

}

div{
    height: 80px;
    width: 550px;
    background-color: grey;
    border-radius: 10px;
    position: absolute;
    bottom: 10px;
    left: center;
    display: flex;
    justify-content: center;
    align-items: center;

}

.first{
    transition: transform 0.6s ease-in-out;
    transform: translateY(+80px);
}

.first:hover {
    transform: translateY(-2px); /* Moves up slightly when hovered */

  }

h1{
  height: 40px;
    border-right: 2px solid black;
    overflow: hidden;
    animation: typing 5s steps(40,end), blink-caret 0.5s step-end infinite;
}

@keyframes typing {
  from{
    width:0%;
  }
  to{
    width: 20%;
  }
}
@keyframes blink-caret {
  from,to{
    border-color: transparent;
  }
  50%{
    border-color: black;
  }
}