/* 
Esse código CSS define o estilo de um botão flutuante que alterna entre o modo claro e escuro em uma página web.
 Ele usa ícones para mostrar a lua (no modo claro) e o sol (no modo escuro), trocando suas aparências e cores conforme o tema da página muda.
 */

/*Adicionando variáveis de Cor*/
 :root {
    --background-color: whitesmoke;
    --text-color: #000000;
}

body.dark-mode {
    --background-color: #333333;
    --text-color: whitesmoke;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}
/*Elementos principais*/

nav {
    background-color: var(--background-color);
    color: var(--text-color);
}

/* style.css */
body {
    background-color: whitesmoke;
    color: black;
    transition: background-color 0.5s ease, color 0.5s ease;
}

body.dark-mode {
    background-color: black;
    color: whitesmoke;
}

button {
    margin: 20px;
    padding: 10px;
    font-size: 16px;
}

footer {
    background-color: var(--background-color);
    color: var(--text-color);
}
/* Botão para alternar entre os modos escuro/claro */
.theme-toggle {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: transparent;
    border: none;
    color: #fff;
    padding: 10px;
    border-radius: 50%;
    box-shadow: none;
    transition: color 0.3s ease;
    z-index: 999;
}

/* Remove o contorno ao clicar ou focar no botão */
.theme-toggle:focus {
    outline: none;
}

/* Estiliza o ícone dentro do botão */
.theme-toggle i {
    color: #fff;
    font-size: 20px;
}

/* Ocultar ícone do sol no modo claro (por padrão) */
.theme-toggle .fa-sun {
    display: none;
    color: #fff; /* Define a cor do sol como branco */
}

/* Quando o corpo estiver no modo escuro */
body.dark-mode .theme-toggle {
    background-color: transparent;
    color: #007bff;
}

/* Mostra o ícone do sol no modo escuro */
body.dark-mode .theme-toggle .fa-sun {
    display: inline;
    color: #fff; /* Mantém o ícone do sol branco */
}

/* Oculta o ícone da lua no modo escuro */
body.dark-mode .theme-toggle .fa-moon {
    display: none;
}
