/* ============================================
   style.css - Lista de Tarefas
   ============================================ */

/* TODO A: Usando o seletor universal, zeramos margin e padding
   de todos os elementos e definimos box-sizing: border-box      */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

/* TODO B: Estilize a tag body com:
   - font-family: Arial, sans-serif
   - background-color: #f0f2f5
   - color: #333
*/
 body {
   font-family:  Arial, sans-serif;
   background-color: #f0f2f5;
   color: #333
 }

#info{
   margin-top: 8px;
}

/* TODO C: Estilize o header com:
   - background-color: #4a6cf7
   - color: white
   - text-align: center
   - padding: 24px
*/
header {
   background-color: #4a6cf7;
   color: white;
   text-align: center;
   padding: 24px;
}

/* TODO D: Estilize o main com:
   - max-width: 600px
   - margin: 32px auto
   - padding: 0 16px
*/
main {
   max-width: 600px;
   margin: 32px auto;
   padding: 0 16px;
}

/* TODO E: Estilize a section com id "formulario" para que
   o input e o botão fiquem lado a lado (use display: flex e gap: 8px) */
#formulario{
   display: flex;
   gap: 8px;
}

/* TODO F: Estilize o input com id "inputTarefa":
   - flex: 1  (para ocupar o espaço disponível)
   - padding: 10px
   - border: 1px solid #ccc
   - border-radius: 6px
   - font-size: 16px
*/
#inputTarefa{
   flex: 1;
   padding: 10px;
   border: 1px solid #ccc;
   border-radius: 6px;
   font-size: 16px;
}

/* TODO G: Estilize o botão com id "btnAdicionar":
   - background-color: #4a6cf7
   - color: white
   - border: none
   - padding: 10px 20px
   - border-radius: 6px
   - cursor: pointer
   - font-size: 16px
*/
#btnAdicionar{
   background-color: #4a6cf7;
   color: white;
   border: none;
   padding: 10px 20px;
   border-radius: 6px;
   cursor: pointer;
   font-size: 16px;
}
/* TODO H: Crie um estilo para o hover do botão btnAdicionar
   mudando a background-color para #3a57d7  */
#btnAdicionar:hover{
   background-color: #3a57d7;
   transition: 0.2s ease-in-out;
}

/* TODO I: Estilize a ul com id "lista":
   - list-style: none
   - margin-top: 16px
*/
#lista{
   list-style: none;
   margin-top: 16px;
}

/* TODO J: Estilize os itens da lista (li dentro de #lista) com:
   - display: flex
   - justify-content: space-between
   - align-items: center
   - background: white
   - padding: 12px 16px
   - border-radius: 8px
   - margin-bottom: 8px
   - box-shadow: 0 1px 4px rgba(0,0,0,0.1)
*/
#lista li{
   display: flex;
   justify-content: space-between;
   align-items: center;
   background: white;
   padding: 12px 16px;
   border-radius: 8px;
   margin-bottom: 8px;
   box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

/* TODO K: Crie a classe .concluida para riscar o texto da tarefa:
   - text-decoration: line-through
   - color: #aaa
*/
#lista li button{
   margin-left: 8px;
   padding: 4px 10px;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   font-size: 13px;
}
.concluida{
   text-decoration: line-through;
   color: #aaa;
}
#lista li button:hover{
   background-color: #aaa;
   transition: 0.2s ease-in-out;
}
/* BÔNUS - TODO L: Adicione uma media query para telas menores que 480px
   onde o #formulario mude para flex-direction: column */
@media (max-width:480px){
   #formulario{
      flex-direction: column;
   }
}
/* TODO M: Estilize o footer com:
   - text-align: center
   - padding: 16px
   - font-size: 13px
   - color: #888
*/
footer{
   text-align: center;
   padding: 16px;
   font-size: 13px;
   color: #888;
}