.display-none{
    display: none;
}

.typewriter-1 {
    max-width: 100vw;
    overflow: hidden;
    white-space: nowrap;
    margin: 0 auto;
    animation: typing 1.5s steps(32, end) forwards, blink-caret-white .6s step-end infinite;
    width: 0;
}

.typewriter-2 {
    max-width: 100vw;
    overflow: hidden;
    white-space: nowrap;
    margin: 0 auto;
    animation: typing 1.5s steps(32, end) forwards 1.5s, blink-caret-gold .6s step-end infinite;
    width: 0;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
    from, to { border-right: .15em solid #D4AF37; }
    99% { border-right: .15em solid #D4AF37; }
    100% { border-right: 0; }
}

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

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

.animated-appear{
    opacity: 0;
    filter: blur(2px);
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    transition: transform 1s;
}

.animate-appear{
    opacity: 1;
    filter: blur(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
.animated-appear:nth-child(1){
    transition-delay: 0ms;
}
.animated-appear:nth-child(2){
    transition-delay: 200ms;
}
.animated-appear:nth-child(3){
    transition-delay: 400ms;
}
.animated-appear:nth-child(4){
    transition-delay: 600ms;
}
.animated-appear:nth-child(5){
    transition-delay: 800ms;
}

.animated-appear-button{
    opacity: 0;
    filter: blur(2px);
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    transition: all 1s;
}

.animate-appear-button{
    opacity: 1;
    filter: blur(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
}