body {
    font-family: Arial;
    background: #667eea;
    display: flex;
    justify-content: center;
    padding-top: 50px;
}

.container {
    background: rgb(255, 255, 255);
    width: 350px;
    padding: 20px;
    border-radius: 8px;
}

.input-section {
    display: flex;
    gap: 5px;
    margin-bottom: 15px;
}

input {
    flex: 1;
    padding: 8px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

button {
    padding: 5px;
    border: none;
    cursor: pointer;
    color: white;
    border-radius: 30px;
}

#addBtn {
    background: green;
    transition: all 0.3s ease;
    border-radius: 5px;
}

#updateBtn {
    background: orange;
    transition: all 0.3s ease;
}

#updateBtn:hover{
  background-color: rgb(216, 101, 55);
  transform: scale(1.1);
}

#addBtn:hover{
  background: #667eea;
  transform: scale(1.1);
}

#updateBtn:active,
#addBtn:active,
.editBtn:active,
.deleteBtn:active,
.doneBtn:active,
.undoBtn:active {
  animation: clickEffect 0.3s ease;
}

@keyframes clickEffect {
  0% { transform: scale(1); }
  50% { transform: scale(0.9); }
  100% { transform: scale(1); }
}


li{
    background: #f1f1f1;
    margin-bottom: 8px;
    padding: 8px;
    display: flex;
    /* flex-direction: column; */
    align-items: flex-start;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.todo-text{
    flex: 1;
    word-break: break-word;
}
.completed {
    background-color: #d4edda;
}
.done{
    text-decoration: line-through;
}

.btn-group{
    display: flex;
    gap: 5px;
    align-items: center;
    flex-shrink: 0;
    align-self: flex-end;
}

li span{
    font-size: 12px;
}

.editBtn {
    background-color: blue;
    transition: all 0.3s ease;
}

.editBtn:hover{
  background-color: rgb(198, 195, 22);
  transform: scale(1.1);
}

.deleteBtn {
    background-color: red;
    transition: all 0.3s ease;
}


.deleteBtn:hover{
  background-color: brown;
  transform: scale(1.1);
}

.doneBtn{
    background-color: rgb(148, 210, 26);
    transition: all 0.3s ease;

}
.doneBtn:hover{
    background-color: rgb(202, 148, 9);
      transform: scale(1.1);

}
.undoBtn{
    background-color: rgb(21, 196, 212);
    transition: all 0.3s ease;

}

.undoBtn:hover{
    background-color: rgb(5, 105, 89);
      transform: scale(1.1);

}

@media (max-width: 480px){

    li{
        flex-direction: column;
        align-items: flex-start;
    }

    .btn-group{
        width: 100%;
        justify-content: space-between;
        margin-top: 6px;
    }

    .todo-text{
        width: 100%;
    }

}