@font-face {
    font-family: 'cmu_typewriter_textregular';
    src: url('cmuntt-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'pt_serifregular';
    src: url('PTF55F-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
body {
    font-family: pt_serifregular, serif;
    /* font-family: cmu_typewriter_textregular,  */
    color: #336;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

main {
    padding: 1rem;
    flex: 1;
}

@media only screen and (min-width: 52rem) {
    main {
        width: 50rem;
    }
}
@media only screen and (max-width: 52rem) {
    main {
        align-self: stretch;
    }
}

h1 {
    margin: 0px 0px 1rem 0px;
}

.main {
    font-size: 1.2rem;
    margin-top: 3rem;
}

.main h1 {
    font-size: 3rem;
    font-family: cmu_typewriter_textregular, monospace;
    min-height: 5rem;
    padding: 0px;
}

.main address {
    margin-top: 5rem;
    font-style: normal;
}


.typeletters span {
    opacity: 0;
    animation: appear 100ms ease-in 0s forwards;
}

.typeletters span:nth-child(1) {
    animation-delay: 1000ms;
}
.typeletters span:nth-child(2) {
    animation-delay: 1500ms;
}
.typeletters span:nth-child(3) {
    animation-delay: 1700ms;
}
.typeletters span:nth-child(4) {
    animation-delay: 2000ms;
}
.typeletters span:nth-child(5) {
    animation-delay: 2500ms;
}
.typeletters span:nth-child(6) {
    animation-delay: 3000ms;
}

.typeletters span:nth-child(7) {
    animation-delay: 4500ms;
}
.typeletters span:nth-child(8) {
    animation-delay: 4700ms;
}
.typeletters span:nth-child(9) {
    animation-delay: 4900ms;
}
.typeletters span:nth-child(10) {
    animation-delay: 5000ms;
}
.typeletters span:nth-child(11) {
    animation-delay: 5200ms;
}
.typeletters span:nth-child(12) {
    animation-delay: 5300ms;
}
.typeletters span:nth-child(13) {
    animation-delay: 7500ms;
}
.typeletters span:nth-child(14) {
    animation-delay: 7700ms;
}


.typeletters span::after {
    display: inline-block;
    position: relative;
    top: -0.9rem;
    content: '\00a0';

    border-bottom: 0.4rem solid #336;
    animation: disappear 0s ease-in 0s forwards;
}
.typeletters span:nth-child(1)::after {
    animation-delay: 1500ms;
}
.typeletters span:nth-child(2)::after {
    animation-delay: 1700ms;
}
.typeletters span:nth-child(3)::after {
    animation-delay: 2000ms;
}
.typeletters span:nth-child(4)::after {
    animation-delay: 2500ms;
}
.typeletters span:nth-child(5)::after {
    animation-delay: 3000ms;
}
.typeletters span:nth-child(6)::after {
    animation-delay: 3500ms;
    animation-duration: 500ms;
    animation-iteration-count: 2;
}
.typeletters span:nth-child(7)::after {
    animation-delay: 4700ms;
}
.typeletters span:nth-child(8)::after {
    animation-delay: 4900ms;
}
.typeletters span:nth-child(9)::after {
    animation-delay: 5000ms;
}
.typeletters span:nth-child(10)::after {
    animation-delay: 5200ms;
}
.typeletters span:nth-child(11)::after {
    animation-delay: 5300ms;
}
.typeletters span:nth-child(12)::after {
    animation-delay: 5500ms;
    animation-duration: 500ms;
    animation-iteration-count: 4;
}
.typeletters span:nth-child(13)::after {
    animation-delay: 7700ms;
}
.typeletters span:nth-child(14)::after {
    animation-delay: 7900ms;
}


@keyframes appear {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes disappear {
    0% {
        content: '\00a0';
        display: inline-block;
    }
    100% {
        content: '';
        display: none;
    }
}