body{
    background: rgb(219, 219, 219);
    padding-top: 5em;
    height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
}


.typing h1{
    overflow: hidden;
    border-right: .15em solid #afafaf;
    white-space: nowrap;
    margin: 0 auto;
    letter-spacing: .15em;
    animation:
    typing 3s steps(17, end),
    blink-caret .75s step-end infinite;
}


.reveal{
    padding-top: 4em;
    display: flex;
    justify-content: center;
    position: absolute;
    align-items: center;
    animation: reveal 10s;
    -webkit-animation: reveal 10s;
}

#subtext{
    font-family: "Montserrat", sans-serif;
    color: #292929;
    font-weight: 200;
    font-size: .8em;
}

#text {
    font-family: "Montserrat", sans-serif;
    color: #333333;
    font-weight: 400;
  }

@-webkit-keyframes reveal {
    from {opacity: 0}
    to {opacity: 1}
}

@keyframes reveal {
    from {opacity: 0}
    to {opacity: 1}
}

@keyframes typing {
    from {width: 0}
    to { width: 100%}
}

@keyframes blink-caret{
    from, to { border-color: transparent}
    50% { border-color: #afafaf;}
}