style.css

/* Configurações gerais do body */
body {
    background-color: #f5f5f5; /* cor de fundo padrão */
    color: #000; /* cor de texto padrão */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 10vh;
}

/* Configurações do body para o modo escuro */
body.dark-mode {
    background-color: #000; /* cor de fundo para o modo escuro */
    color: #f5f5f5; /* cor de texto para o modo escuro */
}

/* Configurações do container */
.container {
    width: center;
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 0 20px;
}

/* Configurações do botão toggle */
.modo-toggle-container {
    margin-top: auto;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.modo-toggle {
    display: none;
}

.modo-toggle-label {
    display: block;
    width: 60px;
    height: 34px;
    border-radius: 17px;
    background-color: #000;
    position: relative;
    cursor: pointer;
}

/* Configurações do indicador do botão toggle */
.modo-toggle-label::before {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background-color: #fff;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 0.5s;
}

/* Configurações do indicador do botão toggle para o modo escuro */
.dark-mode .modo-toggle-label::before {
    background-color: #000;
}

/* Configurações do botão toggle quando está selecionado */
.modo-toggle:checked+.modo-toggle-label {
    background-color: #fff;
}

/* Configurações do indicador do botão toggle quando está selecionado */
.modo-toggle:checked+.modo-toggle-label::before {
    transform: translateX(26px);
}

/* 
Esse CSS é responsável por definir a aparência do site em geral,
incluindo as configurações para o modo claro e modo escuro. O body é configurado com uma cor de fundo padrão e cor de texto padrão,
além de ser flexível e centralizado verticalmente na página. Quando o body recebe a classe .dark-mode,
sua cor de fundo e cor de texto mudam,
criando assim o modo escuro. 
*/