style.css

.one{
    max-width: 500px;
    height: auto;
    background-color: rgb(250, 240, 96);
    margin: 50px auto;
    padding: 10px 10px;
    border-radius: 15px;
    box-shadow: 0px 0px 15px 5px rgb(187, 61, 61);
    
}
.one h1{
    text-align: center;
    font-style: italic;
    color: rgb(235, 122, 17);
    text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
}
form{
    display: flex;
    align-items: center;
    gap: 15px;
}
form input{
    text-align: center;
    border: 0px;
    width: 70%;
    height: 40px;
    border: 5px solid rgb(0, 255, 234);
    border-radius: 10px;
    margin-left:40px;
}
form button{
    border: 0px;
    border-radius: 5px;
    background-color: rgb(43, 226, 58);
    color: aliceblue;
    width: 40px;
    height: 40px;
}


ul li{
    list-style: none;
    cursor: pointer;
    margin-left: 30px;
    margin-bottom: 5px; 
    padding:15px 20px 15px;
    position: relative;
    width: 80%;
    text-align: center;
    color: blueviolet;
    font-weight: bold;
    background-color: antiquewhite;
    border-radius: 15px;
}
#task-list{
    padding: 0px 10px;
}

ul li::before{
  content: "☐";
  position: absolute;
  left: -20px;
  
}
ul li.checked{
    text-decoration: line-through;
    color: rgb(255, 8, 0);
}

ul li.checked::before{
    position: absolute;
    content: "☑";
    color: black;
}
ul li span{
position: absolute;
right: -20px;
}