:root {
    --steps: 10;
    --background: #1d1f20;
}
body {
    display: grid;
    place-content: center;
    min-height: 80vh;
    background: var(--background);
}
.typing {
    font-family: 'Inconsolata', 'Consolas', 'monospace';
    font-size: 6vw;
    color: #d7b94c;
    position: relative;
    z-index: -1;
    padding-left: 0.3em;
}

@media only screen and (max-width: 600px) {
    .typing {
      font-size: 16px;
    }
  }
  
  .typing::after {
    content: "|";
    position: absolute;
    right: 0;
    width: 100%;
    color: white;
    background: var(--background);
    animation: typing 2s steps(var(--steps)) forwards, caret 0.5s infinite;
}

@media only screen and (max-width: 600px) {
    .typing::after {
        display: none; /* Esconder o cursor "|" em telas menores */
    }
}

@keyframes typing {
    to {
        width: 62%;
    }
}

@keyframes caret {
    50% {
        color: transparent;
    }
}

@media only screen and (max-width: 600px) {
    @keyframes typing {
        to {
            width: 100%;
        }
    }
    
    @keyframes caret {
        50% {
            color: white;
        }
    }
}