@import url('https://fonts.googleapis.com/css2?family=poppins:wght@200;300;400;500;600;700;800;900&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

*

{margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
}

body
{display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #111;
}
.list
{position: relative;
background: #fff;
width: 350px;
}
.list h2
{
background-image: #03a9f4;
color: #fff;
padding: 10px 20px;
font-weight:600;
}
.list ul
{
    position: relative;
    padding: 20px;
}
.list ul li
{
    position: relative;
    list-style: none;
    padding: 15px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);

}
.list ul li:last-child
{
    border-bottom: none;
}
.list ul li label
{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}
.list ul li label input
{
    visibility: hidden;
    appearance: none;
}
.list ul li label p
{
    position: absolute;
}
.list ul li label span{
    position: relative;
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.list ul li label span::before
{
    content: '';
    position: absolute;
    top: 5px;
    width: 10px;
    height: 5px;
    border-left: 2px solid #ccc;
    border-bottom: 2px solid #ccc;
    transform: rotate(-40deg);
}
.list ul li label input:checked~p
{
    text-decoration: line-through;
    color: #ccc;
}
.list ul li label input:checked~span
{
    background: #03a9f4;
    border: 1px solid #03a9f4;
}
.list ul li label input:checked~span::before
{
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
}
