/* Andreos Last Modified - styles
   Pure solid colors, no gradients, no borders, no shadows, no aura.
   Typewriter animation with blinking underscore cursor.
   Centered horizontally, all in one line.
*/

/* Wrapper for centering */
.andreos-lm-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 20px 0;
}

/* Main container */
.andreos-lm {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    font-family: 'Orbitron', monospace;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
    padding: 0;
}

/* Pure colors - no gradients, no aura, no effects */
.andreos-lm-label { color: #FF0000; }   /* red */
.andreos-lm-year  { color: #00FF00; }   /* green */
.andreos-lm-month { color: #0000FF; }   /* blue */
.andreos-lm-day   { color: #FFFF00; }   /* yellow */
.andreos-lm-time  { color: #00FFFF; }   /* cyan */
.andreos-lm-link  { color: #FF00FF; }   /* magenta */

/* Separators use white color */
.andreos-lm-sep { color: #FFFFFF; }

/* Link style: no underline, pure color, smooth transition */
.andreos-lm-link {
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.andreos-lm-link:hover {
    opacity: 0.7;
}

/* Typewriter effect: animate container width from 0 to full.
   Use steps so characters appear one-by-one. */
.andreos-lm.anim-typewriter {
    width: 0;
    animation: andreos-lm-typewriter 3.6s steps(40, end) 0s forwards;
    position: relative;
    vertical-align: middle;
}

/* Blinking underscore cursor (pure white) appended after line */
.andreos-lm.anim-typewriter::after {
    content: "_";
    display: inline-block;
    margin-left: 4px;
    color: #FFFFFF;
    animation: andreos-lm-blink 600ms steps(1) infinite;
}

/* Keyframes */
@keyframes andreos-lm-typewriter {
    from { width: 0; }
    to   { width: 100%; }
}

@keyframes andreos-lm-blink {
    50% { opacity: 0; }
}

/* Ensure content stays on one line */
.andreos-lm * {
    white-space: nowrap;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .andreos-lm {
        font-size: 16px;
    }
}

@media screen and (max-width: 480px) {
    .andreos-lm {
        font-size: 14px;
    }
}