.filters {
  position: sticky;
  top: 0;
  background: white;
}

.todo_list li {
  margin-top: 1.5em;
}

.due_today {
  color: #400;
}

.completed {
  display: none;
  color: darkgrey;
}

.threshold_in_future {
  display: none;
  color: darkblue;
}

.filters:has(#show_completed:checked) ~ .todo_list .completed {
  display: list-item;
}

.filters:has(#show_future:checked) ~ .todo_list .threshold_in_future {
  display: list-item;
}

.overdue {
  color: darkred;
}

.priority::before {
  content: "(";
}
.priority::after {
  content: ")";
}