.todo-container {
  position: absolute;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  cursor: move; /* ±íʾ¿ÉÍ϶¯ */

}

.to-do-app{
  width:100%;
  max-width: 540px;
  background: #fff;
  /* margin:100px auto 20px; */
  padding:40px 30px 70px;
  border-radius:20px;
}
.to-do-app h2{
  color:#002765;
  display:flex;
  align-items:center;
 margin-bottom:20px;
}
.to-do-app h2 img{
  width:30px;
  margin-left:10px;
}
.to-do-app .row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#edeef0;
  border-radius:30px;
  padding-left: 20px;
  margin-bottom:25px;
}

.to-do-app input{
  flex:1; 
  border:none; 
  outline:none;
  background:transparent;
  padding:10px;
  font-weight: 14px;
}


.to-do-app button{
  border:none;
  outline:none;
  padding:16px 50px;
  background:#ff5945;
  color:#fff;
  font-size:16px;
  cursor:pointer;
  border-radius:40px;
}
.to-do-app ul li{
  list-style:none;
  font-size:17px;
  padding: 12px 8px 12px 50px;
  position:relative;
  
}
.to-do-app ul li::before{
  content:'';
  position:absolute;
  height:28px;
  width:28px;
  border-radius:50%;
  background-image:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQB4J-pG9txpPTPeF1tFztIh3yzWyN7bK2Eyw&usqp=CAU);
  background-size:cover;
  background-position:center;
  top:8px;
  left:8px;
 
}
.to-do-app ul li.checked{
  color:#555;
  text-decoration:line-through;
}
.to-do-app ul li.checked::before {
background-image:url(data:image/png;base64,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);
}

.to-do-app ul li span{
  position:absolute;
  right:0;
  width:40px;
 height:40px;
  font-size:22px;
  color:#555;
  line-height:40px;
  text-align:center;
}

.to-do-app ul li span:hover{
  background:#edeef0;
  border-radius:50%;
}



.hidden {
  display: none;
}

@media (max-width: 480px) {
  .to-do-app {
    padding: 20px 15px 40px;
}

.to-do-app h2 {
    font-size: 1.2em;
}

.to-do-app h2 img {
    width: 20px;
}

.to-do-app .row {
    padding: 10px;
}

.to-do-app .row input {
    font-size: 0.9em;
}

.to-do-app .row button {
    font-size: 0.9em;
}

.todo-container {
  width: 90%;
  margin-left: 50px;
}

.to-do-app button {
  padding: 10px 15px;
}
}