.root{
  --border-color: #fb6f92;
  --bg-color: white;
  --new-task-color: #fb6f92;
  --cb-border: #fb6f92;
  --checked-bg: #fb6f92;
  --checked-border: #e85d75;
}

.dark-mode {
  --border-color: #205295;
  --bg-color: black;
  --new-task-color: #0A2647;
  --cb-border: #0A2647;
  --checked-bg: #144272;
  --checked-border: #2C74B3;
}

.input-text{
  flex: 1;
  border: 2px solid var(--border-color);
  border-radius: 35px;
  padding: 10px;
  position: relative;
  width: 100%;
  max-width: 600px;
}

.input-button-wrapper {
  display: flex;
  align-items: center; 
  gap: 10px;
  flex-wrap: wrap; 
}

.add-task-button, .delete-task-button {
  border: 2px solid var(--border-color);
  background-color: white;
  border-radius: 35px;
  padding: 10px;
  position: relative;
  width: 70px;
}

.delete-task-button{
  margin-left: 10px;
}
.add-task-button:hover, .delete-task-button:hover{
  transform: translateY(-2px);
}

.add-task-button:active, .delete-task-button:active{
  transform: scale(0.9);
  transition: transform 0.1s ease;
}

.newTask{
  color:  var(--new-task-color);
  padding: 5px;
  padding-bottom: 9px;
  display: flex;
  align-items: center;
  gap: 15px;
  padding-left: 10px;
}

.completed {
  text-decoration: line-through;
  color: gray;
}

.list-checkbox {
  appearance: none; /* Removes default checkbox */
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-color); /* Pink border */
  border-radius: 5px; /* Slightly rounded corners */
  background-color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-block;
  position: relative;
}

.list-checkbox:checked {
  background-color: var(--cb-border); /* Pink when checked */
  border-color: var(--checked-border);
}

.list-checkbox:checked::after {
  content: "✔";
  color: white;
  font-size: 14px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
}