@import url(https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;800&display=swap);*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:Nunito,sans-serif;list-style:none;text-decoration:none}body{background-color:#f0f0f0;height:100vh;overflow:hidden}.container{width:100%;height:100vh;overflow:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.todo-form{margin-top:30px;width:400px;background-color:#fff;padding:20px;border-radius:5px;-webkit-box-shadow:0 0 10px 5px rgba(0,0,0,.1);box-shadow:0 0 10px 5px rgba(0,0,0,.1)}.todo-form .field{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.todo-form .field input{margin-right:10px;-webkit-box-flex:1;-ms-flex:1;flex:1;padding:10px;font-weight:700;outline:0;color:#333;border:none;-webkit-transition:all .2s;transition:all .2s;border-bottom:2px solid rgba(0,0,0,.07);-webkit-transform-style:flat}.todo-form .field input:focus{border-bottom:2px solid #1e90ff}.todo-form .field button.btn-add{background-color:#a6cdf5;border:none;border-radius:3px;color:#1e90ff;padding:10px 15px;font-size:16px;cursor:pointer;outline:0;-webkit-transition:all .2s;transition:all .2s}.todo-form .field button.btn-add:hover{background-color:#1e90ff;color:#fff}.todo-container{width:500px;max-height:450px;background-color:#fff;margin-top:30px;-webkit-box-shadow:0 0 10px 5px rgba(0,0,0,.1);box-shadow:0 0 10px 5px rgba(0,0,0,.1);border-radius:5px;overflow:hidden}.todo-container .tabs{display:-ms-grid;display:grid;width:100%;-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr)}.todo-container .tabs .tab{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:13px;font-weight:700;text-align:center;cursor:pointer;-webkit-transition:all .2s;transition:all .2s}.todo-container .tabs .tab p{pointer-events:none}.todo-container .tabs .tab span{margin-left:10px}.todo-container .tabs .tab:nth-child(1){color:#91c1f1}.todo-container .tabs .tab:nth-child(1).active,.todo-container .tabs .tab:nth-child(1):hover{color:#1e90ff;background-color:#bddeff}.todo-container .tabs .tab:nth-child(2){color:#f88}.todo-container .tabs .tab:nth-child(2).active,.todo-container .tabs .tab:nth-child(2):hover{color:red;background-color:#ffc8c8}.todo-container .tabs .tab:nth-child(3){color:#79ff79}.todo-container .tabs .tab:nth-child(3).active,.todo-container .tabs .tab:nth-child(3):hover{color:green;background-color:#c1ffc1}::-webkit-scrollbar{width:3px}::-webkit-scrollbar-thumb{background-color:#b4d9ff}ul.list{height:100%;overflow-y:scroll}ul.list .list-item{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;padding:20px;padding-right:30px;font-weight:700;color:#555;background-color:rgba(0,0,0,.02)}ul.list .list-item:hover{background-color:#fff}ul.list .list-item .text{-webkit-box-flex:1;-ms-flex:1;flex:1}ul.list .list-item .circle{margin-right:20px;font-size:10px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;color:green;width:20px;height:20px;background-color:#fff;border:2px solid rgba(0,0,0,.2);border-radius:5px;cursor:pointer;-webkit-transition:all .2s;transition:all .2s}ul.list .list-item .circle:hover{border-radius:50px;border:2px solid green;background-color:#c7ffc7}ul.list .list-item .circle.complete{border-radius:50px;border:2px solid green;background-color:#c7ffc7}ul.list .list-item span.deleteBtn{cursor:pointer;position:absolute;top:8px;right:5px;color:red;padding:10px}.fa-check{pointer-events:none}@media (max-width:600px){.todo-form{width:320px}.todo-container{width:320px}.todo-container .tabs .tab p{display:none}}
img{
    height: 500px;
    width: 500px;
    position: absolute;
    z-index: -1;
    opacity: 0.3;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}