*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

body{
    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    background:linear-gradient(
        135deg,
        #1e1b4b,
        #312e81,
        #4c1d95
    );

    padding:20px;
}

.container{
    width:100%;
    max-width:650px;
}

.todo-app{

    background:#ffffff;

    border-radius:20px;

    padding:35px;

    box-shadow:
    0 20px 50px rgba(0,0,0,0.25);
}

.todo-header{
    text-align:center;
    margin-bottom:30px;
}

.todo-header h1{
    color:#4c1d95;

    font-size:2.2rem;

    margin-bottom:8px;
}

.subtitle{

    color:#777;

    font-size:15px;
}

.todo-input-container{

    display:flex;

    gap:12px;

    margin-bottom:25px;
}

.todo-input{

    flex:1;

    padding:15px;

    border:none;

    outline:none;

    border:2px solid #ddd;

    border-radius:12px;

    font-size:16px;

    transition:.3s;
}

.todo-input:focus{

    border-color:#7c3aed;
}

.add-todo-btn{

    border:none;

    cursor:pointer;

    padding:0 25px;

    border-radius:12px;

    font-size:16px;

    font-weight:600;

    color:white;

    background:#7c3aed;

    transition:.3s;
}

.add-todo-btn:hover{

    background:#6d28d9;

    transform:translateY(-2px);
}

.filter-container{

    display:flex;

    justify-content:center;

    gap:10px;

    margin-bottom:25px;
}

.filter-btn{

    border:none;

    cursor:pointer;

    padding:10px 18px;

    border-radius:25px;

    background:#eee;

    font-size:14px;

    transition:.3s;
}

.filter-btn:hover{

    background:#ddd;
}

.filter-btn.active{

    background:#7c3aed;

    color:white;
}

.todo-list{

    list-style:none;
}

.todoitem{

    display:flex;

    align-items:center;

    gap:15px;

    padding:16px;

    margin-bottom:15px;

    border-radius:12px;

    background:#f5f3ff;

    transition:.3s;
}

.todoitem:hover{

    transform:translateY(-2px);

    box-shadow:
    0 5px 15px rgba(0,0,0,0.1);
}

.todo-checkbox{

    width:18px;

    height:18px;

    cursor:pointer;
}

.todo-text{

    flex:1;

    font-size:16px;

    color:#333;
}

.delete-btn{

    border:none;

    cursor:pointer;

    padding:10px 14px;

    border-radius:10px;

    color:white;

    background:#ef4444;

    transition:.3s;
}

.delete-btn:hover{

    background:#dc2626;
}

.todo-footer{

    margin-top:25px;

    display:flex;

    justify-content:space-between;

    align-items:center;
}

.items-left{

    color:#666;

    font-size:15px;
}

.clear-completed{

    border:none;

    cursor:pointer;

    padding:12px 18px;

    border-radius:10px;

    color:white;

    background:#f59e0b;

    transition:.3s;
}

.clear-completed:hover{

    background:#d97706;
}

@media(max-width:600px){

    .todo-input-container{

        flex-direction:column;
    }

    .add-todo-btn{

        height:50px;
    }

    .todo-footer{

        flex-direction:column;

        gap:15px;
    }
}

.checked{

    text-decoration: line-through;

    color: #888;

    opacity: 0.7;
}
.todoitem.completed .todo-text {
    text-decoration: line-through;
    color: #999;
}