* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

main {
    display: grid;
    align-items: center;
    padding: 4rem;
    min-height: 100vh;
    background: linear-gradient(#eff0f3, #efe0ef);
}

.container {
    display: grid;
    justify-items: start;
    gap: 2rem;
}

[data-typewriter] {
    font-family: system-UI;
    font-weight: bold;
    font-size: 4.5rem;
    color: #d9376e;
    height: 6rem;
    border-right: 0.8rem solid transparent;
    padding: 0.6rem;
}

[data-typewriter]:not(.typing) {
    animation: blink-cursor 1.1s step-end infinite;
}

@keyframes blink-cursor {
    0%,
    100% {
        border-color: transparent;
    }

    50% {
        border-color: #ff8e3c;
    }
}