@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

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

/* Background */
body{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
background:linear-gradient(135deg,#120024,#2a004f,#3b0066,#120024);
background-size:400% 400%;
animation:bgAnimation 10s ease infinite;
color:white;
}

/* Background animation */
@keyframes bgAnimation{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}

/* Container card */
.container{
width:420px;
padding:35px;
border-radius:15px;
background:rgba(255,255,255,0.05);
backdrop-filter:blur(10px);
box-shadow:0 0 25px #ff00ff;
text-align:center;
}

/* Title */
h1{
margin-bottom:20px;
font-size:30px;
text-shadow:0 0 8px #ff00ff,0 0 15px #ff00ff;
}

/* Input */
#Todolist{
width:65%;
padding:10px;
border:none;
border-radius:8px;
outline:none;
background:#1a0033;
color:white;
box-shadow:0 0 8px #ff00ff inset;
}

/* Add Button */
#Addbtn{
padding:10px 16px;
margin-left:8px;
border:none;
border-radius:8px;
background:linear-gradient(45deg,#ff00ff,#7b00ff);
color:white;
font-weight:600;
cursor:pointer;
transition:0.3s;
}

#Addbtn:hover{
transform:scale(1.08);
box-shadow:0 0 12px #ff00ff,0 0 25px #7b00ff;
}

/* Task list */
ol{
list-style:none;
margin-top:20px;
}

/* Task item */
li{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
background:#1a0033;
padding:10px 12px;
margin-top:10px;
border-radius:10px;
box-shadow:0 0 10px #7b00ff;
animation:taskEntry 0.4s ease;
}

/* Task entry animation */
@keyframes taskEntry{
from{
opacity:0;
transform:translateY(10px);
}
to{
opacity:1;
transform:translateY(0);
}
}

/* Custom checkbox */
li input[type="checkbox"]{
appearance:none;
width:18px;
height:18px;
border-radius:4px;
border:2px solid #ff00ff;
cursor:pointer;
position:relative;
transition:0.2s;
}

li input[type="checkbox"]:checked{
background:#ff00ff;
box-shadow:0 0 8px #ff00ff;
}

li input[type="checkbox"]:checked::after{
content:"✔";
color:white;
font-size:12px;
position:absolute;
left:2px;
top:-2px;
}

/* Delete button */
li button{
padding:6px 10px;
border:none;
border-radius:6px;
background:linear-gradient(45deg,#ff0055,#ff0033);
color:white;
font-size:12px;
cursor:pointer;
transition:0.25s;
}

li button:hover{
transform:scale(1.15);
box-shadow:0 0 10px #ff0055;
}
.credit{
margin-top:20px;
font-size:12px;
opacity:0.7;
text-align:center;
letter-spacing:1px;
color:#ff9cff;
text-shadow:0 0 6px #ff00ff;
transition:0.3s;
}

.credit:hover{
opacity:1;
text-shadow:0 0 10px #ff00ff,0 0 20px #7b00ff;
}