* {
  margin: 0;
  padding: 0;
  font-family: sans-serif, arial;
}

body {
  padding-top: 70px;
  background-color: rgb(200 , 130 , 0);
}

#cebecalho {
  position: fixed;
  top: 0;
  width: 100%;
  height: 70px;
  background-color: rgb(0 , 30 , 70);
}

#titulo {
  margin: 10px auto;
  width: max-content;
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  background-color: rgb(0 , 180 , 0);
  border-radius: 50px;
}

#titulo:hover {
  text-decoration: line-through solid black;
}

#conteiner-tarefas {
  width: 80%;
  margin: 51px auto 10px;
  padding: 10px 50px 40px;
  background-color: white;
  border: solid 3px rgb(0 , 30 , 70);
  border-radius: 30px;
}

#funcionamento {
  margin: 5px;
  font-style: italic;
  color: grey;
}

#adicionar-tarefa {
  position: fixed;
  top: 75px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  background-color: grey;
  padding: 7px;
  border-radius: 20px;
}

#texto-tarefa {
  padding: 2px;
  border-radius: 10px;
  border: white solid 2px;
  outline: 0;
}

#texto-tarefa:focus {
  border: turquoise solid 2px;
  border-radius: 10px;
}

#lista-tarefas {
  list-style-position: inside;
  margin: 20px;
}

#lista-tarefas li {
  padding: 5px 10px;
  border-radius: 20px;
  border-bottom: blue solid 1px;
}

#lista-tarefas li:hover {
  background-color: rgb(200 , 200 , 200);
  cursor: pointer;
}

#botoes {
  position: fixed;
  width: max-content;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: grey;
  padding: 10px;
  border-radius: 20px;
}

.selecionada {
  background-color: gray;
}

.completed {
  text-decoration: line-through solid black;
  color: rgb(100 , 100 , 100);
}

.botao {
  font-family: sans-serif, arial;
  font-size: 15px;
  padding: 5px 10px;
  margin: 0 2px;
  border-radius: 10px;
  font-weight: 900;
  cursor: pointer;
  border: none;
  box-shadow: 1px 1px 1px 1px rgb(50 , 50 , 50);
  transition: box-shadow 100ms ease, transform 100ms ease;
}

.botao:active {
  box-shadow: inset 1px 1px 1px 1px rgb(50 , 50 , 50);
  transform: translate(1px , 1px);
}

#criar-tarefa , #mover-cima , #mover-baixo {
  background-color: turquoise;
}

#criar-tarefa:hover , #mover-cima:hover , #mover-baixo:hover {
  background-color: rgb(50 , 200 , 190);
}

#remover-selecionado , #apaga-tudo , #remover-finalizados {
  background-color: red;
  color: white;
}

#remover-selecionado:hover , #apaga-tudo:hover , #remover-finalizados:hover {
  background-color: rgb(200 , 0 , 0);
}

#salvar-tarefas {
  background-color: rgb(0 , 200 , 0);
}

#salvar-tarefas:hover {
  background-color: rgb(0 , 150 , 0);
}