body {
  background-color: #f9f5ea;
  color: #0c0c0c;
  background-image: url(https://i.ifh.cc/ffQ7rX.jpg);
  background-repeat: no-repeat;
}
.light {
  background-color: #fafafa;
  border: 1px solid #d9cebb;
  box-shadow: 1px 1px 1px 1px #d9cebb;
  color: #0c0c0c;
}
.light-add-btn {
  background-color: #0c0c0c;
  border: 1px solid #d9cebb;
  box-shadow: 1px 1px 1px 1px #d9cebb;
  color: #fafafa;
}
.light-reset {
  background-color: #fafafa;
  border: 1px solid #d9cebb;
  box-shadow: 1px 1px 1px 1px #d9cebb;
  color: red;
}
.dark {
  background-color: #212121;
  background-image: url(https://i.ifh.cc/S6cJ2L.jpg);
  background-repeat: no-repeat;
  color: #fafafa;
}
.dark .light {
  background-color: #0c0c0c;
  border: 1px solid #0c0c0c;
  box-shadow: 1px 1px 1px 1px #555555;
  color: #fafafa;
}
.dark .light-add-btn {
  background-color: #fafafa;
  border: 1px solid #555555;
  color: #0c0c0c;
}
.dark .light-reset {
  background-color: #0c0c0c;
  border: 1px solid #555555;
  color: red;
  box-shadow: 1px 1px 1px 1px #555555;
}
.dark input,
.dark select {
  background-color: #0c0c0c;
  border: 1px solid #fafafa;
  color: #fafafa;
}
.dark .colon {
  color: #fafafa;
}
.dark .modal-content {
  background-color: #212121;
  border: 1px solid #555555;
  color: #fafafa;
}
.dark #todo-btn-plus {
  background-color: #79b3ff;
  border: 1px solid #555555;
  color: #0c0c0c;
}
.dark #todo-btn-close {
  background-color: #0c0c0c;
  border: 1px solid #555555;
  color: #fafafa;
}
.dark #todo-modal-title {
  background-color: #0c0c0c;
  border: 1px solid #555555;
  color: #fafafa;
}
.dark #change-modal-title {
  background-color: #0c0c0c;
  border: 1px solid #555555;
  color: #fafafa;
}
.dark #change-modal-desc {
  background-color: #0c0c0c;
  border: 1px solid #555555;
  color: #fafafa;
}
.dark #todo-modal-desc {
  background-color: #0c0c0c;
  border: 1px solid #555555;
  color: #fafafa;
}
.dark .reset-modal-text {
  color: #fafafa;
}
.dark #reset-btn-close {
  background-color: #0c0c0c;
  border: 1px solid #555555;
  color: #fafafa;
}
.dark .inportance-btn {
  background-color: #0c0c0c;
  color: #fafafa;
}
.dark .todo-item {
  background-color: #222222;
  background-blend-mode: multiply;
  background-blend-mode: multiply;
  border: 1px solid #555555;
  color: #fafafa;
}
.todo-item {
  background-color: #f9f5ea;
  background-blend-mode: multiply;
  background-blend-mode: multiply;
}
.dark .display-flex {
  background-color: #0c0c0c;
  border: 1px solid #555555;
  color: #fafafa;
}
.todo-board {
  background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);
}
.in-progress-board {
  background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);
}
.done-board {
  background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);
}
.dark .todo-board {
  background-image: linear-gradient(to top, #313131 0%, #0c0c0c 100%);
}
.dark .in-progress-board {
  background-image: linear-gradient(to top, #313131 0%, #0c0c0c 100%);
}
.dark .done-board {
  background-image: linear-gradient(to top, #313131 0%, #0c0c0c 100%);
}