*{
  margin:0;
  padding:0;
}
.container {
  max-width: 80%;
  margin: auto;
  margin-top: 40px;
  background: rgba(255, 255, 255, 0.082); /* Transparent background */
  backdrop-filter: blur(20px); 
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
body{
  background-size: cover;
  background-position: center; 
  background-repeat: no-repeat;
  height:100vh; 
  margin:0; 
}
h1{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 5px;
  font-size:40px;
  font-weight:680;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color:rgb(11, 8, 31);
}
.head{
  display: flex;
  justify-content: center;
  align-items: center;
}
input{
  width:90%;
  height:40px;
  margin-top: 15px;
  border-radius: 10px;
  margin-right:5px;
  border:2px solid black;
  padding-left: 5px;
}
input::placeholder{
  text-align: center;
}
#add{
  width:50px ;
  height:40px;
  margin-top: 15px;
  margin-right: 5px;
  border-radius: 10px;
  border:2px solid #59ed78;
  background-color:	#59ed78;
  transition: transform 0.1s ease-in-out;
}
#add:active {
  transform: scale(0.9);
}
#add:hover{
  cursor:pointer;
}
#reset{
  width:50px ;
  height:40px;
  margin-top: 15px;
  border-radius: 10px;
  border:2px solid #ff0000;
  background-color:#ff0000;
  transition: transform 0.1s ease-in-out;
}
#reset:hover{
  cursor:pointer;
}
#reset:active {
  transform: scale(0.9);
}
.unord{
  list-style: none;
  margin-top:30px;
  font-size: 20px;   
}
span{
  width:132%;

}
.list {
  display: table;
  width: 100%;
  border-collapse: collapse;
  display: flex;
  height:20px;
}

.list li {
  display: table-row;
}

.list li span {
  display: table-cell;
  padding: 2px;
  margin-top:6px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius:10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid black;
  display: flex;
  justify-content: space-between; 
  align-items: center; 
  max-width: 585px;
}
.completed { 
  text-decoration: line-through; color: rgb(0, 0, 0);
 }
 .delete {
  background: red;
  color: white;
  height:20px;
  width:20px;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.progress-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}
canvas {
  max-width: 200px;
  max-height: 200px;
}