:root
{
    --cor-fonte: black;
    --cor-fundo: white;
    --cor-sombra: #8C9EFF;
    --imagem-preta: none;
    --imagem-clara: block;
    --modo-escuro: false;
}

.modo_escuro:root
{
    --cor-fonte: white;
    --cor-fundo: #282A36;
    --cor-sombra: #16161D;
    --imagem-preta: block;
    --imagem-clara: none;
    --modo-escuro: true;
}
#modo_escuro_botao
{
    all: unset;
    display: inline-flex;
    float: right;
    border:1px solid black;
    border-radius: 4px;
    width: 9px;
    height: 9px;
    margin:0px 8px;
    margin-top: 30px;
    margin-right: 2px;
}

#modo_escuro_botao:checked
{
    background-color: #8e24aa;
}

.black
{
    
    display: var(--imagem-preta);
    background-color: var(--cor-fundo);
}

.white
{
    
    display: var(--imagem-clara);
    background-color: var(--cor-fundo);
    
}