* {
    margin: 0;
    padding: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    box-sizing: border-box;
}

body {
    height: 100vh;
    width: 100vw;
    background: linear-gradient(130deg, rgb(1, 1, 28), rgb(0, 153, 255));
}

.container {
    max-width: 500px;
    margin: 100px auto 20px;
    background-color: #fff;
    padding: 1.5rem;
    padding-bottom: 2rem;
    border-radius: 1.25rem;

}

@media screen and (max-width: 500px) {
    .container {
        max-width: 300px;
    }
}

.container .title-box {
    width: 100%;
    height: 20%;
    display: flex;
    justify-content: center;
    padding-bottom: 1.5rem;
}

.container .title-box h2 {
    color: rgb(12, 2, 69);
}

.container .title-box img {
    height: 1.25rem;
}

.container .search-bar {
    width: 100%;
    height: 40px;
    background: rgba(109, 170, 190, 0.5);
    border-radius: .65rem;
    display: flex;
    margin-bottom: 30px;
}

.container .search-bar #input {
    width: 100%;
    height: 40px;
    background-color: transparent;
    border: none;
    outline: none;
    padding: 10px 20px;
    font-size: 1rem;
}

::placeholder {
    color: rgb(12, 2, 69);
    opacity: 50%;
}

.container .search-bar .add_btn {
    background-color: rgb(12, 2, 69);
    border: none;
    outline: none;
    border-radius: .65rem;
    padding: 10px 15px;
    font-size: larger;
    color: rgb(168, 206, 219);
    cursor: pointer;
}

.container #list_container li {
    list-style: none;
    font-size: 1.25rem;
    padding: .5rem .75rem .5rem 2rem;
    cursor: pointer;
    user-select: none;
    /* user select ker sakta hai text ko bhi */
    position: relative;
}

.container #list_container li::before {
    content: '';
    position: absolute;
    height: 1rem;
    width: 1rem;
    border-radius: 50%;
    background-image: url(dry-clean.png);
    background-size: cover;
    background-position: center;
    top: .9rem;
    left: .2rem;
}

.container #list_container .checked {
    color: rgb(109, 170, 190);
    text-decoration: line-through;
    text-decoration-color: rgb(38, 0, 255);
}

.container #list_container .checked::before {
    content: '';
    background-image: url(check.png);
}
 .container ul li span{
    position: absolute;
    right: 0;
    top: 5px;
    height: 1.5rem;
    width: 1.5rem;
    font-size: 1rem;
    text-align: center;
 }

 .container ul li span:hover{
    background: rgba(109, 170, 190, 0.5);
    border-radius: 50%;
    color: darkblue;
 }