*{
  margin:0;
  padding: 0;
  box-sizing: border-box;
}
body{
  background-image:linear-gradient(120deg,rgb(165,104,165),rgb(206, 191, 209));
  color: azure;
  font-family:'Poppins',sans-serif;
  min-height: 100vh;

}
header{
  font-size: 1.2rem;
}
header,form{
  min-height: 15vh;
  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:rgb(165, 104, 165);
  background-color: white;
  cursor:pointer;
  transition: all 0.3 ease;
}
form button:hover{
  background: rgb(165,104 ,165);
  color: white;

}
.todo-container{
  display: flex;
  justify-content: center;
}
.todo-list{
  min-width:50%;
  list-style: none;

}
.todo{
  margin:0.6rem;
  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;
}

.trash-btn,
.complete-btn{
  background:#933aa2;
  color: white;
  border:none;
  padding: 1rem;
  cursor:pointer;
  font-size:1rem;


}
.complete-btn{
  background: rgb(101, 39, 101);
}
.todo-item{
  padding: 0rem 0.5 rem;
}
.fa-trash,
.fa-check{
  pointer-events: none;
}
.completed{
  text-decoration: line-through;
  opacity:0.5;
}
.fall{
  transform:translateY(8rem) rotateZ(20deg);
  opacity:0;
}