/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
.typewriter {
    overflow: hidden;
    border-right: 2px solid #3b82f6;
    white-space: nowrap;
    animation:
        typing 2s steps(6, end) 0.5s both,
        blink-caret 1s step-end infinite;
    font-family: "Courier New", monospace;
}

@keyframes typing {
    from {
        width: 0;
    }
    to {
        width: 6ch; /* 6 characters for "whoami" */
    }
}

@keyframes blink-caret {
    from,
    to {
        border-color: transparent;
    }
    50% {
        border-color: #3b82f6;
    }
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .typewriter {
        font-size: 0.875rem; /* text-sm equivalent */
    }
}

@media (min-width: 640px) {
    .typewriter {
        font-size: 1rem; /* text-base equivalent */
    }
}

@media (min-width: 768px) {
    .typewriter {
        font-size: 1.125rem; /* text-lg equivalent */
    }
}