body{
  font-family: Arial;
  background-color: rgb(0, 0, 0);
  color: white;
  transition: background-color 0.5s;
}
.dark-mode{
  background-color: white;
  color: black;
}
.toggle-button{
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
border: none;
border-radius: 20px;
padding: 10px;
cursor: pointer;
}


.grid-todo-list ,
.input-grid-todo{
  display: grid;
  grid-template-columns: 200px 150px 100px;
  column-gap: 10px;
  row-gap: 10px;
  margin-bottom: 10px;
  align-items: center;
}
.input-grid-todo{
  align-items: stretch;
}
.todo-input,
.due-date-input{
  padding: 7px 6px;
  font-size: 15px;
  border-radius: 5px;
  border: none;
}
.add-button{
  background-color: rgb(5, 237, 5);
  /* color: white; */
  border: none;
  cursor: pointer;
  font-size: 15px;
  border-radius: 5px;
  box-shadow: 1px 1px 10px rgba(255, 255, 255, 0.532);
}
.delete-button{
  background-color: rgb(243, 1, 1);
  /* color: white; */
  border: none;
  font-size: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  cursor: pointer;
  border-radius: 5px;
  box-shadow: 1px 1px 10px rgba(251, 250, 250, 0.532);
}
