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

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

body{
background:linear-gradient(135deg,#eef2f3,#d9e4f5);
min-height:100vh;
display:flex;
flex-direction:column;
}

.navbar{
height:70px;
background:rgba(255,255,255,0.4);
backdrop-filter:blur(10px);
display:flex;
align-items:center;
padding:0 40px;
box-shadow:0 4px 20px rgba(0,0,0,0.1);
}

.logo{font-size:22px;font-weight:600;}

.container{flex:1;padding:40px;}

.board{
display:flex;
gap:25px;
justify-content:center;
}

.list{
background:rgba(255,255,255,0.4);
backdrop-filter:blur(10px);
border-radius:15px;
width:300px;
padding:15px;
box-shadow:0 8px 25px rgba(0,0,0,0.15);
transition:0.3s;
}

.list:hover{transform:translateY(-5px);}

.cards{min-height:200px;}

.card{
background:white;
padding:12px;
margin-bottom:10px;
border-radius:10px;
cursor:grab;
transition:0.3s;
animation:fadeIn 0.4s ease;
box-shadow:0 4px 10px rgba(0,0,0,0.1);
}

.card:hover{transform:scale(1.03);}

.hide{display:none;}

.todoBtn{
width:100%;
padding:10px;
border:none;
border-radius:10px;
background:#6c9cff;
color:white;
cursor:pointer;
transition:0.3s;
}

.todoBtn:hover{
background:#4d7cff;
transform:scale(1.05);
}

/* LOADING BUTTON */

.loadingBtn{
background:#ff4d4d;
color:white;
width:100%;
padding:10px;
border:none;
border-radius:10px;
position:relative;
overflow:hidden;
cursor:default;
}

.loadingBtn::after{
content:"";
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:rgba(255,255,255,0.4);
animation:loading 1.s infinite;
}

@keyframes loading{
0%{left:-100%}
100%{left:100%}
}

/* SUCCESS */

.successBtn{
background:#28c76f;
color:white;
width:100%;
padding:10px;
border:none;
border-radius:10px;
}

/* PROGRESS */

.progressContainer{
width:100%;
height:20px;
background:#ddd;
border-radius:20px;
margin-bottom:10px;
overflow:hidden;
}

.progressBar{
height:100%;
width:0%;
background:#28c76f;
text-align:center;
color:white;
font-size:12px;
transition:0.4s;
}

/* INPUT */

#totalTasks{
width:100%;
padding:8px;
margin-bottom:10px;
border-radius:8px;
border:none;
outline:none;
}

footer{
height:60px;
display:flex;
justify-content:center;
align-items:center;
background:rgba(255,255,255,0.3);
}

footer span{font-weight:600;}

@keyframes fadeIn{
from{opacity:0;transform:translateY(10px)}
to{opacity:1;transform:translateY(0)}
}

@media(max-width:768px){
.board{flex-direction:column;align-items:center;}
}