/*#container-header {
    width: 660px;
    height: 60px;
    margin: 10px;
    display: flex;
    align-items: center;     /* Centraliza na vertical
    position: fixed;
    background: #171717;
    border-radius: 10px;
    z-index: 9999;
}*/

:root {
    --font-title: "Alfa Slab One", serif;
    --font-text: "Mozilla Headline", sans-serif;
    --font-mono: "JetBrains Mono", monospace;
}

#container-header{
    position:fixed;

    top:15px;
    left:1%;

    width:min(95%, 565px);

    height:60px;

    display:flex;
    align-items:center;

    background:#171717;
    border-radius:10px;

    z-index:9999;

    /*position: absolute;
    left: 50%; Gostei mais tirei Por Problemas de codigo
    transform: translate(-50%);*/ 
}

.home{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: #D4D4D4;
    border-radius: 50%;
    margin-left: 10px;
    text-decoration: none;
    cursor: pointer;
}

.home img{
    width: 22px;
    height: 22px;
    object-fit: contain;
}


/**/

.sobre{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: #262626;
    border-radius: 50%;
    margin-left: 10px;
    text-decoration: none;
    cursor: pointer;
}

.sobre img{
    width: 22px;
    height: 22px;
    object-fit: contain;
}

/**/

.areas{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: #262626;
    border-radius: 50%;
    margin-left: 10px;
    text-decoration: none;
    cursor: pointer;
}

.areas img{
    width: 27px;
    height: 27px;
    object-fit: contain;
}

/**/

.projetos{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: #262626;
    border-radius: 50%;
    margin-left: 10px;
    text-decoration: none;
    cursor: pointer;
}

.projetos img{
    width: 21px;
    height: 21px;
    object-fit: contain;
}


/**/

.phone{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: #262626;
    border-radius: 50%;
    margin-left: 10px;
    text-decoration: none;
    cursor: pointer;
}

.phone img{
    width: 21px;
    height: 21px;
    object-fit: contain;
}

/**/

.logo{
    display: flex;
    justify-content: center;
    align-items: center;

    width: 40px;
    height: 40px;

    background: #D4D4D4;
    border-radius: 50%;
    margin-left: 10px;
}

.logo img{
    width: 90%;
    height: 90%;
    border-radius: 100%;
    object-fit: contain;
}

/**/

.github{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: #262626;
    border-radius: 50%;
    margin-left: 10px;
    text-decoration: none;
    cursor: pointer;
}

.github img{
    width: 30px;
    height: 30px;
    object-fit: contain;
}

/**/

.formulario{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: #262626;
    border-radius: 50%;
    margin-left: 10px;
    text-decoration: none;
    cursor: pointer;
}

.formulario img{
    width: 21px;
    height: 21px;
    object-fit: contain;
    margin-left: 5px; /* Ajuste fino para centralizar o ícone */
}


/*

.doar{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: #262626;
    border-radius: 50%;
    margin-left: 10px;
    text-decoration: none;
    cursor: pointer;
}

.doar img{
    width: 22px;
    height: 22px;
    object-fit: contain;
}*/

/**/

.bio{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: #262626;
    border-radius: 50%;
    margin-left: 10px;
    text-decoration: none;
    cursor: pointer;
}

.bio img{
    width: 21px;
    height: 21px;
    object-fit: contain;
}

/*

.cursos{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: #262626;
    border-radius: 50%;
    margin-left: 10px;
    text-decoration: none;
    cursor: pointer;
}

.cursos img{
    width: 21px;
    height: 21px;
    object-fit: contain;
}*/

/**/

.curriculo{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: #262626;
    border-radius: 50%;
    margin-left: 10px;
    text-decoration: none;
    cursor: pointer;
}

.curriculo img{
    width: 21px;
    height: 21px;
    object-fit: contain;
}

/**/

.comunidade{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: #262626;
    border-radius: 50%;
    margin-left: 10px;
    text-decoration: none;
    cursor: pointer;
}

.comunidade img{
    width: 21px;
    height: 21px;
    object-fit: contain;
}


/*Deu Errado mais deixa ele

.enviando span {
    animation: piscar 1.4s infinite both;
    font-weight: bold;
}

.enviando span:nth-child(2) {
    animation-delay: .2s;
}

.enviando span:nth-child(3) {
    animation-delay: .4s;
}

@keyframes piscar {
    0% { opacity: .2; }
    20% { opacity: 1; }
    100% { opacity: .2; }
}
*/






/* ===== ANIMAÇÃO DOS ÍCONES DO HEADER ===== */
.home,
.sobre,
.areas,
.projetos,
.phone,
.github,
.formulario,
.bio,
.curriculo,
.comunidade {
    transition: transform 0.3s ease, background 0.3s ease;
}

.home:hover,
.sobre:hover,
.areas:hover,
.projetos:hover,
.phone:hover,
.github:hover,
.formulario:hover,
.bio:hover,
.curriculo:hover,
.comunidade:hover {
    transform: scale(1.15);
    background: #3a3a3a;
}

/* O HOME TEM COR DIFERENTE */
.home {
    background: #D4D4D4;
}

.home:hover {
    background: #b0b0b0;
}