*{
margin:0;
padding:0;
font-family: 'poppins', sans-serif;
box-sizing:border-box;
}
.container{
width:100%;
min-height: 100vh;
background:linear-gradient(135deg,#153677,#4e085f);
padding: 10px;
}
.img{
width: 100px;
height:100px;
}
.todo-app{
width:100%;
max-width: 540px;
background: #fff;
margin: 100px auto 20px;
padding: 40px 30px 70px;
border-radius: 10px;
}
.todo-app h2{
color:#002765;
display: flex;
align-items: center;
margin-bottom: 20px;
}
.todo-app h2 img{
width:50px;
height: 40px;
margin-left: 10px;
}
.row{
display: flex;
align-items: center;
justify-content: space-between;
background: #edeef0;
border-radius: 30px;
padding-left: 20px;
margin-bottom: 25px;
}
input{
flex:1;
border:none;
outline:none;
background: transparent;
padding: 10px;
}
button{
border:none;
outline:none;
padding:16px 50px;
background: #ff5945;
color:#fff;
font-size:16px;
cursor:pointer;
border-radius: 40px;
}
ul li{
padding: 12px 8px 12px 50px;
list-style:none;
font-size:17px;
cursor: pointer;
user-select: none;
position: relative;
}
ul li::before{
content:'';
position:absolute;
height:28px;
width:28px;
border-radius: 50%;
background-image: url(radio-button.png);
background-size: cover;
background-position: center;
top:12px;
left:8px;
}
ul li.checked{
color:#555;
text-decoration: line-through;
}
ul li.checked::before{
background-image: url(checked.png);
}
ul li span{
position: absolute;
right: 0;
top:5px;
width:40px;
height:40px;
font-size:22px;
color:#555;
line: height 40px;
text-align:center;
border-radius:50px;
padding-top: 7px;
}
ul li span:hover{
background:#edeef0;
}
@media(max-width:600px)
{
.wrapper-main{
width:100%;
}
}