:root { /* Paleta de cores do projeto */
    --bg-principal: #0A0A0F;
    --bg-card: #13131A;
    --cor-principal: #00D4FF;
    --cor-alta: #FF4757;
    --cor-media: #FFA502;
    --cor-baixa: #2ED573;
    --texto-principal: #E8E8F0;
    --texto-secundario: #8888AA;
    --borda: #2A2A3A;
}

*{ /* reset global */
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body{ /* Corpo do HTML*/
    background-color: var(--bg-principal);
    color: var(--texto-principal);
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

h1{ /* Titulo principal*/
    color: var(--cor-principal);
    margin-bottom: 20px;
    text-align: center;
}

div#estatistica{ /* div onde mostra as estatisticas*/
    background-color: var(--bg-card);
    border-radius: 7px;
    padding: 10px;
    width: 90%;
    max-width: 600px;
    margin-bottom: 20px;
    border: 1px solid var(--borda);
}

div#area-formulario{ /*div onde ocorre o preenchimento do formulario*/
    background-color: var(--bg-card);
    border-radius: 7px;
    padding: 10px;
    width: 90%;
    max-width: 600px;
    margin-bottom: 20px;
    border: 1px solid var(--borda);  
}

fieldset { /* Remove a borda do fieldset*/
    border: none;
}

div#area-de-filtros{ /*div onde mostra os tipos de filtros*/
    background-color: var(--bg-card);
    border-radius: 7px;
    padding: 10px;
    width: 90%;
    max-width: 600px;
    margin-bottom: 20px;
    border: 1px solid var(--borda);
}

input{ /*Caixa de texto do formulario*/
    width: 100%;
    padding: 8px;
    border-radius: 7px;
    border: 1px solid var(--borda);
    background-color: var(--bg-principal);
    color: var(--texto-principal);
    outline: none;
    margin-top: 5px;
    margin-bottom: 10px;

}

input[type="radio"] { /* Caixa onde seleciona os tipos de prioridade*/
    width: auto;
    margin: 0 5px 0 0;
}

button#btn-adicionar{ /* botão adicionar*/
    width: 100%;
    background-color: var(--cor-principal);
    color: #0A0A0F;
    border: none;
    border-radius: 5px;
    margin-top: 10px;
    padding: 10px;
    cursor: pointer;
    font-weight: bold;
}

button#btn-adicionar:hover{ /* botão adicionar ao passar o mouse*/
    opacity: 0.85;
}

button.btn-filtro{ /* botao tipo de filtro*/
    background-color: transparent;
    border: 1px solid var(--borda);
    color: var(--texto-secundario);
    border-radius: 5px;
    padding: 6px 12px ;
    cursor: pointer;
    margin: 4px;
}

button.btn-filtro:hover{ /* botão tipo de filtro ao passar o mouse*/
    background-color: var(--cor-principal);
    color: var(--texto-principal);
}

div.card-tarefa{ /*div onde mostra as tarefas criadas com manipulação DOM do JS*/
    background-color: var(--bg-card);
    border-radius: 7px;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid var(--borda);
    width: 90%;
    max-width: 600px;
}

button.btn-concluir{ /* botão concluir*/
    background-color: var(--cor-baixa);
    color: var(--bg-principal);
    border: none;
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
    margin: 10px;
}

button.btn-remover{ /* botao remover*/
    background-color: var(--cor-alta);
    color: var(--texto-principal);
    border: none;
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
    margin: 10px;
}

@media(max-width: 480px){ /*Telas menores*/

    div{
        padding: 7px;
    }

    h1{
        font-size: 24px;
    }

    button.btn-filtro{
        padding: 3px 6px;
    }
}