/**
 * Typewriter Animation Styles
 *
 * These styles create the typewriter animation effect with a colored background
 * that grows with the text. Used in conjunction with typewriter.js.
 */

/* Fixed typewriter container style to prevent line breaks */
.typewriter-container {
    display: inline-block;
    position: relative;
    line-height: 1.3;
    margin-bottom: 10px;
    padding: 0;
    white-space: nowrap;
    overflow: visible;
}

/* Text wrapper with fixed display properties */
.typewriter-wrapper {
    display: inline-block;
    background-color: #FFFFFF;
    padding: 5px 10px;
    position: relative;
    color: black;
    font-weight: 900;
    font-size: 5.5rem;
    line-height: 1.2;
    white-space: nowrap;
    min-width: 10px;
}

/* Blinking cursor */
.typewriter-wrapper::after {
    content: '|';
    animation: blink-caret 0.75s step-end infinite;
    position: absolute;
    right: -10px;
}

/* Blink animation */
@keyframes blink-caret {
    from, to {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

/* Responsive font sizes */
@media (max-width: 768px) {
    .typewriter-wrapper {
        font-size: 2.5rem;
    }
}

@media (max-width: 480px) {
    .typewriter-wrapper {
        font-size: 1.8rem;
    }
}