/* Definir cores tema Dark */
:root,
:root[data-theme="dark"] {

    --cor-fundo: #0b0b0f;
    --cor-texto: #8a3e3e;

    --cor-icone: #aa5454e8;
    
    --cor-link: #f0f0f0;
    --cor-hover: #e9e9e9;

    --cor-borda: #b40000f1;

}

:root[data-theme="light"] {

    --cor-fundo: #e9e9e9;
    --cor-texto: #808080;

    --cor-icone: #81ac0c;
    
    --cor-link: #84b907;
    --cor-hover: #0b0b0f;

    --cor-borda: #0f068a;
}


/* Definir cores tema Light */



* {
    margin: 0;  
    padding: 0;
    box-sizing: border-box;

}

body {
    background: var(--cor-fundo);
    color: var(--cor-texto);
    /* font-family: ; */
}

a {
    text-decoration: none;
    color: var(--cor-link);
}

ul {
    list-style: none;
}



#header { 
    display: flex;
    flex-wrap: row wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0.5rem 1rem;
    /* z-index: ; */
    /* position: ; */
    border-bottom: 1px solid var(--cor-borda);
    background-color: #02331252;
    /* background: ; */
}

.menu-desktop {
    /* display: none; */
    
    


}

.menu {
    display: flex;
    gap: 1rem;
    align-items: center;
  
    
}

.menu-texto {
    color: var(--cor-texto);
    text-transform: uppercase;
    font-size: 20px;
}

.menu-link.active .menu-texto, 
.menu-link:hover .menu-texto {
    color: var(--cor-hover);
}

#toggleTheme {
    cursor: pointer;
    color: var(--cor-icone);
    font-size: 1.2rem; /* tamanho fonte */
    transition: all  0.3s ease-in-out;
}

.logo{
    width: 3.5rem;
    height: 1.8remx;
  
    
}

/* Medidas Responsivas */

@media (min-width: 768px)  /* A partir de 768px ate o infinito */
    .menu-desktop {
        display: flex;
        min-width: 30%;
    }
    .header logo { min-width: 30%;}