:root{
    --geral-background: #191818;
    --content-background: #3c3c3c;
    --geral-font-color: #ffffff;
    --primary-color: #b3b3b3;
    --secondary-color: #b5b5b5;
    --strong-color: #a4a4a4;

}

body {
    background-color: #ffffff;
    color: #000000;
    transition: background-color 0.3s, color 0.3s;
}

/* Estilos do modo escuro */
.dark-mode {
    background-color: var(--geral-background);
    color: #e0e0e0;
}

/* Botão de alternância */
.toggle-button {
    position: center;
    top: 10px;
    right: 10px;
    padding: 10px 20px;
    background-color: #000;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    min-width: 160px;
    min-height: 45px;
    font-size: 14px;
    border-radius: 5px;
    white-space: nowrap;
    display: inline-block;
}

.dark-mode .toggle-button {
    background-color: #fff;
    color: var(--secondary-color);
}

/* Outros ajustes para o modo noturno */
.dark-mode header{
}
.dark-mode #sidebar{
    background-color: #000;
}

.dark-mode #main,

.content {
    color: #e0e0e0;
}

.dark-mode hr{
    border-bottom: solid 1px #ffffff;
}

.dark-mode #note{ /* Define a cor dos elementos de dentro das divs de capítulo */
    background-color: var(--content-background);
    border: var(--content-background);
    color: var(--geral-font-color);
    
}

.dark-mode #main-content.lead{ /* Define a cor dos elementos de dentro das divs de capítulo */
    background-color: var(--content-background);
    border: var(--content-background);
    color: var(--geral-font-color);
    
}

.dark-mode #main-content1.lead{ /* Define a cor dos elementos de dentro das divs de capítulo */
    background-color: var(--content-background);
    border: var(--content-background);
    color: var(--geral-font-color);
    
}
.dark-mode #main-content2.lead{ /* Define a cor dos elementos de dentro das divs de capítulo */
    background-color: var(--content-background);
    border: var(--content-background);
    color: var(--geral-font-color);
    
}
.dark-mode #main-content3.lead{ /* Define a cor dos elementos de dentro das divs de capítulo */
    background-color: var(--content-background);
    border: var(--content-background);
    color: var(--geral-font-color);
    
}
.dark-mode #main-content4.lead{ /* Define a cor dos elementos de dentro das divs de capítulo */
    background-color: var(--content-background);
    border: var(--content-background);
    color: var(--geral-font-color);
    
}
.dark-mode #main-content5.lead{ /* Define a cor dos elementos de dentro das divs de capítulo */
    background-color: var(--content-background);
    border: var(--content-background);
    color: var(--geral-font-color);
    
}
.dark-mode #main-content6.lead{ /* Define a cor dos elementos de dentro das divs de capítulo */
    background-color: var(--content-background);
    border: var(--content-background);
    color: var(--geral-font-color);
    
}
.dark-mode #main-content7.lead{ /* Define a cor dos elementos de dentro das divs de capítulo */
    background-color: var(--content-background);
    border: var(--content-background);
    color: var(--geral-font-color);
    
}
.dark-mode #main-content8.lead{ /* Define a cor dos elementos de dentro das divs de capítulo */
    background-color: var(--content-background);
    border: var(--content-background);
    color: var(--geral-font-color);
    
}
.dark-mode #main-content9.lead{ /* Define a cor dos elementos de dentro das divs de capítulo */
    background-color: var(--content-background);
    border: var(--content-background);
    color: var(--geral-font-color);
    
}
.dark-mode #main-content10.lead{ /* Define a cor dos elementos de dentro das divs de capítulo */
    background-color: var(--content-background);
    border: var(--content-background);
    color: var(--geral-font-color);
    
}
.dark-mode #main-content11.lead{ /* Define a cor dos elementos de dentro das divs de capítulo */
    background-color: var(--content-background);
    border: var(--content-background);
    color: var(--geral-font-color);
    
}
.dark-mode #main-content12.lead{ /* Define a cor dos elementos de dentro das divs de capítulo */
    background-color: var(--content-background);
    border: var(--content-background);
    color: var(--geral-font-color);
    
}
.dark-mode #main-content13.lead{ /* Define a cor dos elementos de dentro das divs de capítulo */
    background-color: var(--content-background);
    border: var(--content-background);
    color: var(--geral-font-color);
    
}
.dark-mode #main-content14.lead{ /* Define a cor dos elementos de dentro das divs de capítulo */
    background-color: var(--content-background);
    border: var(--content-background);
    color: var(--geral-font-color);
    
}
.dark-mode #main-content15.lead{ /* Define a cor dos elementos de dentro das divs de capítulo */
    background-color: var(--content-background);
    border: var(--content-background);
    color: var(--geral-font-color);
    
}
.dark-mode #main-content16.lead{ /* Define a cor dos elementos de dentro das divs de capítulo */
    background-color: var(--content-background);
    border: var(--content-background);
    color: var(--geral-font-color);
    
}
.dark-mode #main-content17.lead{ /* Define a cor dos elementos de dentro das divs de capítulo */
    background-color: var(--content-background);
    border: var(--content-background);
    color: var(--geral-font-color);
    
}
.dark-mode #main-content18.lead{ /* Define a cor dos elementos de dentro das divs de capítulo */
    background-color: var(--content-background);
    border: var(--content-background);
    color: var(--geral-font-color);
    
}
.dark-mode #main-content19.lead{ /* Define a cor dos elementos de dentro das divs de capítulo */
    background-color: var(--content-background);
    border: var(--content-background);
    color: var(--geral-font-color);
    
}
.dark-mode #main-content20.lead{ /* Define a cor dos elementos de dentro das divs de capítulo */
    background-color: var(--content-background);
    border: var(--content-background);
    color: var(--geral-font-color);
    
}
.dark-mode #main-content21.lead{ /* Define a cor dos elementos de dentro das divs de capítulo */
    background-color: var(--content-background);
    border: var(--content-background);
    color: var(--geral-font-color);
    
}
.dark-mode #main-content22.lead{ /* Define a cor dos elementos de dentro das divs de capítulo */
    background-color: var(--content-background);
    border: var(--content-background);
    color: var(--geral-font-color);
    
}
.dark-mode #main-content23.lead{ /* Define a cor dos elementos de dentro das divs de capítulo */
    background-color: var(--content-background);
    border: var(--content-background);
    color: var(--geral-font-color);
    
}
.dark-mode #main-content24.lead{ /* Define a cor dos elementos de dentro das divs de capítulo */
    background-color: var(--content-background);
    border: var(--content-background);
    color: var(--geral-font-color);
    
}
.dark-mode #main-content25.lead{ /* Define a cor dos elementos de dentro das divs de capítulo */
    background-color: var(--content-background);
    border: var(--content-background);
    color: var(--geral-font-color);
    
}
.dark-mode #main-content26.lead{ /* Define a cor dos elementos de dentro das divs de capítulo */
    background-color: var(--content-background);
    border: var(--content-background);
    color: var(--geral-font-color);
    
}
.dark-mode #main-content27.lead{ /* Define a cor dos elementos de dentro das divs de capítulo */
    background-color: var(--content-background);
    border: var(--content-background);
    color: var(--geral-font-color);
    
}
.dark-mode #main-content28.lead{ /* Define a cor dos elementos de dentro das divs de capítulo */
    background-color: var(--content-background);
    border: var(--content-background);
    color: var(--geral-font-color);
    
}
.dark-mode #main-content29.lead{ /* Define a cor dos elementos de dentro das divs de capítulo */
    background-color: var(--content-background);
    border: var(--content-background);
    color: var(--geral-font-color);
    
}
.dark-mode #main-content30.lead{ /* Define a cor dos elementos de dentro das divs de capítulo */
    background-color: var(--content-background);
    border: var(--content-background);
    color: var(--geral-font-color);
    
}

 strong{ /* Define as características do negrito do título */
    color: var(--strong-color);
}

.dark-mode .chat-container{
    color: #000;
}

.dark-mode .message-content{
    color: #000;
}

.dark-mode .instagram-post{
    color: #000;
}


.dark-mode #menu ul a {
    color: #aeaeae; /* Define a cor roxa escura para links no modo noturno */
    text-decoration: none; /* Remove a sublinhado dos links */
}

.dark-mode #menu ul a:hover {
    color: #d8cce7; /* Ajuste a cor dos links quando o cursor passa sobre eles, se necessário */
    text-decoration: underline; /* Adiciona sublinhado ao passar o mouse */
}

.dark-mode #menu ul a:active {
    color: #b9b9b9; /* Ajuste a cor quando o link é clicado, se necessário */
}

.dark-mode #menu ul a:visited {
    color: #9b9b9b; /* Ajuste a cor dos links visitados, se necessário */
}


.dark-mode h2{
    color: var(--secondary-color);
}

.dark-mode h3{
    color: var(--secondary-color);
}

.dark-mode h4{
    color: var(--secondary-color);
}

.dark-mode b{
    color: #bcbcbc;
}

.dark-mode #contador{
    filter: invert(1) hue-rotate(180deg);
}

.dark-mode transp {
text-decoration-color: #FFF;
background-image: none;
padding: 5%;
border: 1px solid white;
border-radius: 20px; 
}

.dark-mode #header{
    background-color: var(--geral-background);border-bottom: solid 5px var(--secondary-color)
}

.dark-mode a{
    color: var(--secondary-color);
}

a.button{
    color: var(--secondary-color);
    box-shadow: inset 0 0 0 2px #bdbdbd;
}

.dark-mode header.major > :last-child {
    border-bottom: solid 3px #554e59;
}

.dark-mode ul.contact li:before {
    color: #8b8989;
}

.dark-mode .icons img {
    filter: grayscale (1000%) brightness(100%);
    opacity: 0.7;
}

.dark-mode button{
    box-shadow: inset 0 0 0 2px #868686;
}