/* Custom styles that complement Tailwind CSS */

h1,
h2,
h3,
h4,
h5,
h6,
code,
pre {
    font-family: "JetBrains Mono", monospace;
}

:root {
    --color-glow-dim: rgba(2, 132, 199, 0.3);
    /* sky-600 */
    --color-glow: rgba(2, 132, 199, 0.6);
}

.dark {
    --color-glow-dim: rgba(56, 189, 248, 0.3);
    /* sky-400 */
    --color-glow: rgba(56, 189, 248, 0.6);
}

#profile-photo {
    box-shadow: 0 0 0 2px var(--color-glow-dim), 0 0 20px -4px var(--color-glow);
    transition: box-shadow 0.3s ease;
}

#profile-photo:hover {
    box-shadow: 0 0 0 2px var(--color-glow-dim), 0 0 30px -2px var(--color-glow);
}

/* Smooth transitions for theme switching on key elements */
body,
header,
footer {
    transition-property: background-color, border-color, color;
    transition-duration: 300ms;
    transition-timing-function: ease;
}

.efeito-escrita {
    display: inline-block;
    vertical-align: bottom;
    white-space: nowrap;
    /* Impede que o texto quebre de linha */
    overflow: hidden;
    /* Removido o border-right pois agora você está usando o <span>_</span> como cursor! */
    width: 5ch;
    /* Total de caracteres do seu texto (incluindo espaços) */
    /* Agora a animação digitar roda sozinha aqui */
    animation: digitar 3s steps(5) forwards;
}

.piscar {
    display: inline-block;
    /* Atualizado para a forma padrão de cursor piscante */
    animation: piscar-cursor 1s step-end infinite;
}

/* Animação que revela o texto */
@keyframes digitar {
    from {
        width: 0;
    }

    to {
        width: 5ch;
    }
}

/* Animação do cursor piscante (usando opacity para o caractere _) */
@keyframes piscar-cursor {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}