*{
margin:0;
padding:0;
box-sizing: border-box;

}
body{
background-image: linear-gradient(120deg, #f5d25e,#fda085);
color:white;
font-family:"poppins",sans-serif;
min-height:100vh;
}
p{
text-align:center;
font-size:1.5rem;
padding:1rem 2rem;
}
header{
font-size:1.5rem;
}
header,form{
min-height:20vh;
display:flex;
justify-content: center;
align-items: center;

}
form input,
form button {
padding: 0.5rem;
font-size:2rem ;
border:none;
background:white; 
}
form button{
color:#d88771;
background:white;
cursor: pointer;
}
form button:hover{
background:#d88771;
color: white;
}
.todo-container{
display: flex;
justify-content: center;
align-items: center;
}
.todo-list{
min-width:30%;
list-style:none; 
}
.todo{
margin: 0.5rem;
background: white;
color: black;
font-size: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
transition:all 1s ease;
}
.todo li{
flex:1;
}
.complete-btn ,.trash-btn{
background: #ff6f47;
color: white;
border:none;
padding: 1rem;
font-size:1rem;
cursor:pointer ;
}
.complete-btn{
background:rgb(73,2024,73);
}
.todo-item{
padding:0rem 0.5rem;;
}
.fa-trash,.fa-check{
 pointer-events:none;
}
.completed{
text-decoration: line-through;
opacity:0.5;
}
.fall{
transform: translateY(8rem) rotate(20deg);
opacity: 0;
}
select{
border:none;
outline:none;
appearance:none;
-moz-appearance:none ;
-webkit-appearance:none;
}
.select{
margin:1rem;    
position:relative;
overflow:hidden;
}
select{
color:#ff6f47;
width:10rem;
cursor:pointer;
padding:1rem;
}
.select::after{
content:"\25BC";
position:absolute ;
background:#ff6f47;
top:0;
right:0 ;
padding:1rem;
pointer-events:none;
}
.select:hover::after{
background:white ; 
color: #ff6f47;   
}