*{
margin:0;
padding:0;
box-sizing:border-box;
font-family: "Segoe UI", sans-serif;
}

body{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
background: linear-gradient(135deg,#5f9cff,#7b5cff,#c05cff);
}

/* MAIN APP */

.app{
width:420px;
padding:30px;
border-radius:20px;

background: rgba(255,255,255,0.15);
backdrop-filter: blur(15px);

box-shadow:
0 15px 40px rgba(0,0,0,0.2);

color:white;
}

/* HEADER */

header{
text-align:center;
margin-bottom:25px;
}

header h1{
font-size:32px;
margin-bottom:5px;
}

header p{
opacity:0.8;
font-size:14px;
}

/* INPUT AREA */

.task-input-container{
display:flex;
gap:10px;
margin-bottom:20px;
}

#taskInput{
flex:1;
padding:12px;
border:none;
border-radius:10px;
outline:none;
font-size:15px;
}

#addTaskBtn{
padding:12px 18px;
border:none;
border-radius:10px;

background:white;
color:#333;

font-weight:bold;
cursor:pointer;

transition: all 0.25s ease;
}

#addTaskBtn:hover{
transform:scale(1.05);
background:#f0f0f0;
}

/* TASK LIST */

ul{
list-style:none;
display:flex;
flex-direction:column;
gap:10px;
}

/* TASK ITEM */

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

padding:12px 15px;
border-radius:10px;

background: rgba(255,255,255,0.2);

transition: all 0.25s ease;
}

li:hover{
transform:translateY(-2px);
background: rgba(255,255,255,0.3);
}

/* COMPLETED TASK */

.completed span{
text-decoration:line-through;
opacity:0.6;
}

/* BUTTON AREA */

li div{
display:flex;
gap:8px;
}

/* ACTION BUTTONS */

li button{
border:none;
padding:6px 10px;
border-radius:6px;

cursor:pointer;
font-size:14px;

transition:all 0.2s;
}

li button:first-child{
background:#4CAF50;
color:white;
}

li button:last-child{
background:#ff4d4d;
color:white;
}

li button:hover{
transform:scale(1.15);
}