* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #4f74abf5;
}

#list {
    list-style-type: none;
    padding: 0px !important;
}



#list>li>.editInput {
    outline: none;
    border-bottom: 2px solid grey !important;
}

.linethough {
    text-decoration: line-through;
}

.container {

    display: flex;
    flex-direction: row;
    justify-content: space-around;

}



.dashboard {
    width: 40%;
    display: flex;
    justify-content: space-between;

}

.completed>h4 {
    margin: 0px;
}

.pending>h4 {
    margin: 0px;
}


.button {
    font-size: 35px;
    padding: 5px;
    border-radius: 5px;
    background: linear-gradient(to bottom right, #4F709C, #213555);
}

#input {

    padding: 7px;
    border-radius: 15px;
    color: rgb(1, 36, 57);
    ;
    background-color: #5e78a1;
    font-size: 35px;
    /* border: none; */
}

::-webkit-input-placeholder {
    /* Chrome, Safari */
    color: #25464f;
}

.completed>h4 {
    padding: 5px;
    background: linear-gradient(to bottom right, rgb(115, 209, 96), rgb(42, 104, 30));
    font-size: 35px;
}

.pending>h4 {
    padding: 5px;
    background: linear-gradient(to bottom right, rgb(196, 111, 109), rgb(116, 11, 1));
    font-size: 35px;
}

.pending>h6 {
    margin: 0px auto;
    text-align: center;
    width: 40%;

    border-radius: 10%;
    background-color: rgb(192, 103, 103);
    ;
    margin-top: 30px;
    font-size: 45px;
}

.completed>h6 {
    margin: 0px auto;
    text-align: center;
    width: 40%;

    border-radius: 10%;
    background-color: rgb(102, 191, 102);
    margin-top: 30px;
    font-size: 45px;
}

.todo {
    border: none;
    width: 73%;
    font-size: 45px;
    background-color: #91bac6 !important;
    color: #fff;
}


.button1 {
    font-size: 35px;
    padding: 5px;
    border-radius: 5px;
    background: linear-gradient(to bottom right, #1C6EA4, #154D71);
}

.checkbox-old {
    position: absolute;
    opacity: 0;
    width: 0px;
    height: 0px;
}

.check-container {
    display: block;
    position: relative;
    font-size: 20px;
    padding-left: 50px;
    margin: 25px 0px;

}

.checkbox-new {
    position: absolute;
    left: 0%;
    top: 0%;
    width: 40px;
    height: 40px;
    background-color: rgb(192, 103, 103);
    border: 2px solid grey;
}


.checkbox-old:checked~.checkbox-new {
    background-color: rgb(102, 191, 102);
}


.checkbox-new::after {
    content: "";
    position: absolute;
    left: 8px;
    top: -4px;
    width: 19px;
    height: 29px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
    display: none;

}

.checkbox-old:checked~.checkbox-new::after {
    display: block;
}

.container {
    display: none;
}

.title {
    text-align: center;
}

.title span {
    padding: 10px 20px;
    color: #fff;
    background-color: #454545;
    border-radius: 50%;
    font-size: 30px;
    font-weight: bold;
}


.open {
    cursor: pointer;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    position: absolute;
    right: 40px;
    bottom: 100px;
    background-color: #454545 !important;
    color: #fff;
    font-size: 60px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;

}

.heading {
    width: 40vw;
    height: 30vh;
    background: linear-gradient(to bottom right, #4F709C, #213555);
    font-size: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 25px;
}

.start {
    background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQROLdydvLc2RnrANwK_SE3vxvmem5jjc77NA&s");
    background-repeat: no-repeat;
    background-size: cover;
    background-color: rgba(255, 255, 255, 0.4);
    /* Blend the color and image */
    background-blend-mode: lighten; 
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}