todo.css

/* ----------( body )---------- */
    /* Gradiant is used for background of the body */
    body {
        font-family: ubuntu;
        position: relative;
        max-height: 100vh;
        max-width: 100vw;
        /* ------( css code for gradiant background goes below )------ */
        background: #2BC0E4;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #EAECC6, #2BC0E4);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #EAECC6, #2BC0E4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }

/* ----------( ^ body )---------- */


/* ------( wrapper )------ */
    /* wrapper id is used to hold all the elements inside body */
    #wrapper {
        margin: 150px auto 0 auto;
        background: #eeeeee;
        max-width: 35vw;
        min-width: 420px;
        box-shadow: 7px 7px 16px 0px rgb(80, 80, 80);
        border-radius: 18px;
    }

/* ------( ^ wrapper )------ */


/* ------( h1 and add-todo-icon )------ */
    /* h1 is used for title and add-todo-icon */
    h1 {
        margin: 0;
        background: #00868b;
        color: whitesmoke;
        padding: 10px 2px 10px 5px;
        font-weight: normal;
        border-top-left-radius: 18px;
        border-top-right-radius: 18px;
    }

    h1 span {
        letter-spacing: 2px;
        text-shadow: 3px 3px 5px black;
        height: 60px;
        line-height: 60px;
        font-family: "Ubuntu";
    }

    /* ------( h1 i is used to toggle the visibilty of new todo input field )------ */
    h1 i {
        width: 60px;
        height: 50px;
        text-align: center;
        float: right;
        font-size: x-large;
        padding: 20px 0 0 21px;
        text-shadow: none;
    }

    h1 i:hover {
        cursor: pointer;
        font-size: 1.6rem;
        text-shadow: 3px 3px 5px black;
    }

/* ------( ^ h1 and add-todo-icon )------ */


/* ------( inputContainer  )------ */
    /* ------( input container holds all the element for adding new todo  )------ */
    #inputContainer {
        display: none;
        width: 100%;
        height: 45px;
        margin: 0;
        padding: 0;
        border: none;
        box-sizing: border-box;
    }

    /* ------( this is the input field in the inputContainer )------ */
    #inputContainer input {
        height: 45px;
        margin: 0;
        padding: 10px 10px 10px 23px;
        border: none;
        font-size: medium;
        background: white;
        color: #6d6d6d;
        text-decoration: none;
        font-family: ubuntu;
    }

    #inputContainer input::placeholder {
        color: #8e8e8e;
    }

    /* ------( this is the add new todo button in the inputContainer )------ */
    #inputContainer button {
        display: none;
        height: 45px;
        float: right;
        margin: 0;
        border: none;
        padding: 10px;
        background: white;
        color: rgb(69, 143, 69);
        font-weight: bold;
        font-family: roboto;
        letter-spacing: 1px;
        cursor: pointer;
    }

    /* ------( creates effects on input field while input field has focus )------ */
    #inputContainer input:focus {
        border: none;
        background: #e6f7ff;
        outline: none;
        text-decoration: none;
        text-shadow: none;
        font-size: 108%;
        color: #303030;
    }

    /* ------( creates effects on button while input field got focus )------ */
    #inputContainer input:focus + button {
        background: #e6f7ff;
    }

    /* ------( creates effects on button while button is hover )------ */
    #inputContainer button:hover {
        background: #e6f7ff;
        color: green;
        font-size: 115%;
        font-weight: bolder;
    }

    /* ------( creates effects on button while button got focus )------ */
    #inputContainer button:focus {
        border: none;
        outline: none;
        background: #e6f7ff;
        color: green;
        font-size: 115%;
        font-weight: bolder;
    }

/* ------( ^ inputContainer  )------ */


/* ------( message flash )------ */
    /* ------( this notifies user with a message )------ */
    #message p {
        display: none;
        margin: -45px 0 0 36vw;
        width: fit-content;
        height: 45px;
        padding: 12.5px ;
        position: absolute;
        box-sizing: border-box;
        box-shadow: 4px 4px 8px 0px rgb(29, 28, 28);
    }

/* ------( ^ message flash )------ */


/* ------( noList )------ */
    /* ------( this creates effects for "No ToDO listed" window )------ */
    #noList {
        margin: 0;
        height: 170px;
        width: 35vw;
        min-width: 420px;
        padding: 10px;
        line-height: 150px;
        text-align: center;
        font-family: "Bad Script";
        letter-spacing: 2px;
        background: rgba(171, 235, 235, 0.808);
        color: rgb(0, 163, 163);
        border-bottom-left-radius: 18px;
        border-bottom-right-radius: 18px;
    }

    #noList span{
        margin-right: 10px;
        opacity: 0.9;
        text-align: center;
    }

    #noList:hover {
        cursor: pointer;
    }

/* ------( ^ noList )------ */


/* ------( ulTodo )------ */
    /* ------( this creates effetcs for all li in the ul )------ */
    #ulTodo {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    #ulTodo li {
        height: 51px;
        line-height: 51px;
        margin: 0;
        padding-left: 0px;
    }

    #ulTodo li input[type='checkbox'] {
        margin-left: 23px;
        display: none;
        opacity: 0;
    }

    #ulTodo li span {
        margin: 0;
        margin-left: 23px;
        /*width: 60%;*/
        color: rgb(43, 41, 41);
        display: inline-block;
    }

    #ulTodo li:nth-child(2n) {
        background: white;
    }

    #ulTodo li input[type="text"], #ulTodo li button {
        display: none;
        margin: 0;
        padding: 0;
        height: 45px;
        line-height: 45px;
        width: 0;
        opacity: 0;
        border: none;
        background: white;
    }

    #ulTodo li input[type="text"] {
        font-size: 1.4rem;
        padding: 5px 5px 5px 20px;
        outline: none;
        letter-spacing: 1px;
    }

    #ulTodo li button {
        color: rgb(4, 90, 90);
        float: right;
        outline: none;
    }

    #ulTodo li i {
        display: none;
        height: 0;
        width: 0;
        opacity: 0;
        float: right;
        
    }

    #ulTodo li:hover {
        box-shadow: 4px 4px 15px #00868b;
    }

    #ulTodo li:hover span {
        margin-left: 10px;
        cursor: pointer;
        font-size: 105%;
        font-weight: bold;
    }

    #ulTodo li:hover input[type='checkbox'] {
        display: inline-block;
        opacity: 1.0;
        transition: width 3s;
        transition-timing-function: linear;
        cursor: pointer;
        font-size: 105%;
    }

    #ulTodo li button:hover {
        font-size: 105%;
        font-weight: bolder;
        letter-spacing: 1px;
        color: rgb(0, 94, 0);
        background: rgb(210, 248, 152);
        cursor: pointer;
    }

    #ulTodo li:hover i {
        display: inline-block;
        width: 50px;
        height: 30px;
        line-height: 30px;
        padding: 10px;
        color: rgb(112, 112, 112);
        opacity: 1.0;
        text-align: center;
        cursor: pointer;
    }

    #ulTodo li i:last-child:hover {
        color: #23464d;
        font-size: 125%;
        font-weight: bolder;
    }

    #ulTodo li i:nth-last-of-type(2):hover {
        height: 100%;
        width: 50px;
        background: rgb(233, 3, 3);
        color: white;
        font-size: 125%;
        font-weight: bolder;
        text-shadow: 3px 3px 6px black;
    }

    #ulTodo li:last-child {
        color: yellow;
        border-bottom-left-radius: 18px;
        border-bottom-right-radius: 18px;
    }

/* ------( ^ ulTodo )------ */




/* ---------------------------------------------------------------------------------------------------- */
/* ------( Library-Class goes here )------ */
/* ---------------------------------------------------------------------------------------------------- */
    .boxShadow {
        box-shadow: 4px 4px 15px #00868b;
    }


    .ji {
        cursor: wait;
    }


    .scrolBar {
        height: 255px;
        overflow: auto;
    }

    .doneMessage {
        color: #214f21;
        text-align: center;
        font-family: roboto;
        font-style: italic;
        font-weight: bolder;

        background: #0cebeb;  /* fallback for old browsers */
        background: -webkit-linear-gradient(to right, #29ffc6, #20e3b2, #0cebeb);  /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(to right, #29ffc6, #20e3b2, #0cebeb); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    }


    .completedTodo {
        color: rgb(126, 114, 114);
        text-decoration-line: line-through;
        opacity: 0.6;
    }

/* ------( ^ Library-Class )------ */