* {
     margin: 0;
     padding: 0;
     font-family: "Josefin Sans", sans-serif;
}

.container {
     background: linear-gradient(135deg, #1e1e2f, #3a3a5f); /* Dark gradient */
     min-height: 100vh;
     width: 100%;
}

.light-mode .container {
     background: linear-gradient(135deg, #a69696, #d3d2d2); /* Light gradient */
}

.container-todos {
     padding-top: 60px;
     display: grid;
     margin: 0 auto;
     width: 100%;
     max-width: 700px;
}

header {
     display: flex;
     align-items: center;
     justify-content: space-between;
}

header h1 {
     font-size: 30px;
     text-transform: uppercase;
     letter-spacing: 5px;
     color: #fff;
     font-weight: 500;
}

header .icon-sun {
     width: 30px;
     height: 30px;
     margin-right: 10px;
     cursor: pointer;
}

.container-todos > .input-todo {
     padding: 10px;
     border-radius: 5px;
     background: hsl(237, 14%, 26%);
     max-width: 450px;
     width: 100%;
     margin: 10px auto;
     display: flex;
     align-items: center;
}

.input-todo > input {
     width: 100%;
     font-size: 16px;
     border: none;
     background: transparent;
     color: #73d96e;
     outline: none;
}

.input-todo > .add-icon {
     font-size: 24px;
     color: hsl(234, 39%, 85%);
     cursor: pointer;
     margin-left: 10px;
     transition: color 0.3s ease;
}

.input-todo > .add-icon:hover {
     color: hsl(220, 98%, 61%);
}

.light-mode .container-todos > .input-todo {
     background: hsl(236, 33%, 92%);
}

.light-mode .input-todo > input {
     color: hsl(235, 19%, 35%);
}

.todos {
     display: grid;
     align-items: center;
     margin-top: 15px;
}

.todo {
     background: hsl(237, 14%, 26%);
     border-bottom: 2px solid hsl(237, 13%, 30%);
     padding: 20px;
     display: flex;
     align-items: center;
     cursor: pointer;
     gap: 10px;
}

.light-mode .todo {
     background: hsl(236, 33%, 92%);
     color: hsl(235, 19%, 35%);
}

.todo > input {
     display: none;
}

.checkmark {
     width: 20px;
     height: 20px;
     border: 2px solid #ffffff;
     display: inline-block;
     position: relative;
     margin-right: 10px;
     cursor: pointer;
     flex: 0 0 20px;
}

body.light-mode .checkmark {
     border-color: hsl(235, 19%, 35%);
}

.todo > input:checked + .checkmark::after {
     content: "✔";
     position: absolute;
     left: 4px;
     top: -2px;
     font-size: 18px;
     color: #aba2a2;
}

.todos > .todo > h5 {
     font-size: 15px;
     color: #1ebc6f;
     margin: 0;
}

/* Completed visual state */
.todo.completed > h5 {
     text-decoration: line-through;
     color: #9e9e9e;
}

.tools-container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 10px;
     background: hsl(237, 14%, 26%);
     margin-top: 10px;
}

.tools-container > .items-left {
     color: #009688;
     font-size: 15px;
}

.filter > button {
     background: none;
     border: none;
     color: #009688;
     font-size: 15px;
     cursor: pointer;
     margin: 0 5px;
     transition: 0.5s ease;
}

.filter > button:hover {
     color: #4a90e2;
}

.tools-container > .clear {
     color: #009688;
     font-size: 15px;
     cursor: pointer;
     border: none;
     background: transparent;
     transition: 0.5s ease;
}

.tools-container > .clear:hover {
     color: #4a90e2;
}

body.light-mode {
     background: linear-gradient(135deg, #ffffff, #f0f0f0);
     color: #000;
}

.attribution {
     font-size: 13px;
     text-align: center;
     color: #fff;
     margin-top: 20px;
}

.attribution a {
     color: #fff;
}