body {
    padding: 50px;
    background-color: #f2f5f8;
    font-family: 'Fira Code', monospace;
}

h1 {
    font-size: 9rem;
    margin: 0;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    border-right: .15em solid black;

    width: 0;

    animation:
            typeForward 2s steps(7, end) forwards,       /* type JUMDUM. */
            pauseAfter 0.15s linear forwards 2s,         /* pause on the dot */
            backspace 0.25s steps(1, end) forwards 2.15s,/* delete dot */
            pauseBeforeRetype 0.15s linear forwards 2.4s,/* tiny human pause */
            typeAgain 0.25s steps(1, end) forwards 2.55s,/* retype dot */
            blink .75s step-end infinite 2.8s;           /* resume blinking */
}

.dot {
    position: relative;
    left: -10px;
    opacity: 0;

    animation:
            dotType 0.2s forwards 2s,         /* initial black dot appears */
            dotDelete 0.2s forwards 2.15s,    /* deleted */
            dotRetype 0.2s forwards 2.55s;    /* retyped pink */
}

/* ---- Keyframes ---- */

@keyframes typeForward {
    from { width: 0 }
    to   { width: 7ch } /* J U M D U M . */
}

/* pause frames (do nothing) */
@keyframes pauseAfter { from { width: 7ch; } to { width: 7ch; } }
@keyframes pauseBeforeRetype { from { width: 6ch; } to { width: 6ch; } }

@keyframes backspace {
    from { width: 7ch; }
    to   { width: 6ch; } /* cursor moves back one char */
}

@keyframes typeAgain {
    from { width: 6ch; }
    to   { width: 7ch; } /* cursor moves forward again */
}

@keyframes blink {
    50% { border-color: transparent }
}

@keyframes dotType {
    from { opacity: 0; color: #000; }
    to   { opacity: 1; color: #000; }
}

@keyframes dotDelete {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes dotRetype {
    from { opacity: 0; color: #000; }
    to   { opacity: 1; color: #ff0279; }
}

@keyframes bolden {
    from { font-weight: 400; }
    to   { font-weight: 700; }
}

@keyframes addEmoji {
    from {
        width: 0;
        opacity: 0;
    }
    to {
        width: 1.5ch;   /* space for one emoji */
        opacity: 1;
        content: "✨";  /* some browsers ignore content here; see note below */
    }
}

.unreasonable span {
    font-weight: 400;
    animation: boldLetter 0.12s forwards;
    opacity: 1;
}

/* Delays — adjust to taste */
.unreasonable span:nth-child(1)  { animation-delay: 3.0s; }
.unreasonable span:nth-child(2)  { animation-delay: 3.12s; }
.unreasonable span:nth-child(3)  { animation-delay: 3.24s; }
.unreasonable span:nth-child(4)  { animation-delay: 3.36s; }
.unreasonable span:nth-child(5)  { animation-delay: 3.48s; }
.unreasonable span:nth-child(6)  { animation-delay: 3.60s; }
.unreasonable span:nth-child(7)  { animation-delay: 3.72s; }
.unreasonable span:nth-child(8)  { animation-delay: 3.84s; }
.unreasonable span:nth-child(9)  { animation-delay: 3.96s; }
.unreasonable span:nth-child(10) { animation-delay: 4.08s; }
.unreasonable span:nth-child(11) { animation-delay: 4.20s; }
.unreasonable span:nth-child(12) { animation-delay: 4.32s; }

/* Bolding animation */
@keyframes boldLetter {
    from { font-weight: 400; }
    to   { font-weight: 700; }
}

p {
    max-width: 500px;
    font-size: 2rem;
}

.contact {
    font-size: 1rem;
    color: #b7bfc7;
}

@media (max-width: 500px) {
    body {
        padding: 20px;
    }

    h1 {
        font-size: 4rem;
    }

    .dot {
        left: -5px;
    }
}