/* Typing effect styles */
.logo {

    font-family: "Codystar", sans-serif;
    font-size: 1.2rem;
    letter-spacing: 0.2em;
    font-weight: 800;
    opacity: 50%;
    color: white;
    text-align: right; /* Keeps text aligned to the right */
    min-height: 1.5em; /* Prevents layout shift when text changes */
    display: inline-block; /* Allows the text to grow from right to left */
    white-space: nowrap; /* Prevents text from wrapping to next line */
    overflow: hidden; /* Hides any overflow during typing */
    text-shadow: -2px 0 5px #fff67286,
               +3px 0 3px #ffffff8e,
               -4px 0 4px #ffffff79,
               +6px 0 6px #00aaff80,
               -8px 0 8px #00aaff85;
}

/* Optional: Add a blinking cursor effect */
.logo::after {
    content: '|';
    animation: blink 0.7s infinite;
    margin-left: 2px;
}

/* Blinking cursor animation */
@keyframes blink {
    0%, 50% {
        opacity: 1;
    }
    51%, 100% {
        opacity: 0;
    }
}


@media (max-width: 768px) {
    .logo {
        font-size: 0.6rem;
        letter-spacing: 0.04em;
        opacity: 80%;
    }
}