*{margin:0;padding:0}.container{background-image:linear-gradient(violet,cyan);min-height:100vh;width:100%;display:flex;justify-content:center;align-items:center}.app-wrapper{background-image:linear-gradient(cornflowerblue,violet);padding:30px;border-radius:12px;margin-bottom:10px;box-shadow:3px 6px 20px #fff;min-width:450px;min-height:600px;box-sizing:border-box}.header h1{text-align:center;margin:30px 0;color:#fff;text-decoration:underline}.task-input{outline:none;width:260px;padding:15px;margin-right:25px;border:1px solid white;border-radius:10px;font-size:16px;background:aquamarine}.btn-add{width:70px;padding:15px;font-size:16px;border-radius:12px;background:aqua;border:1px solid;cursor:pointer;border:1px solid white}.list-item{display:flex;margin:24px 0;border:1px solid white;border-radius:10px;padding:10px;max-height:30px;background:aquamarine}.btn-complete,.btn-edit,.btn-delete{border:none;outline:none;background-color:transparent;font-size:20px;cursor:pointer;position:relative}.btn-complete{color:#32cd32;margin-right:10px}.btn-edit{color:violet;margin-right:10px}.btn-delete{color:#000000bf}.completed{text-decoration-line:line-through;text-decoration-color:red;text-decoration-thickness:1.4px;opacity:.5}.list{width:220px;background:none;border:none;font-size:16px;padding-left:5px;margin-right:59px}input:focus,button:focus{outline:none}@media screen and (max-width: 450px){.app-wrapper{width:90%;min-width:auto}.task-input{width:50%;font-size:13px}.btn-add{width:30%}.list{width:45%;font-size:13px}}@media screen and (max-width: 384px){.app-wrapper{width:80%;min-width:auto}.task-input{width:50%;font-size:12px}.btn-add{width:25%}.list{width:30%;font-size:12px}}@media screen and (max-width: 359px){.app-wrapper{width:80%;min-width:auto}.task-input{width:49%}.btn-add,.list{width:25%}}@media screen and (max-width: 350px){.app-wrapper{width:80%;min-width:auto}.task-input{width:48%}.btn-add{width:25%}.list{width:23%}}@media screen and (max-width: 338px){.app-wrapper{width:80%;min-width:auto}.task-input{width:45%;font-size:13px}.btn-add{width:25%;font-size:13px}.list{width:30%;font-size:13px}.btn-complete,.btn-delete,.btn-edit{font-size:12px}}@media screen and (max-width: 315px){.app-wrapper{width:80%;min-width:auto}.task-input{width:40%;font-size:12px}.btn-add,.list{width:25%;font-size:12px}.btn-complete,.btn-delete,.btn-edit{font-size:12px}}@media screen and (max-width: 300px){.app-wrapper{width:80%;min-width:auto}.task-input{width:40%;font-size:10px}.btn-add,.list{width:25%;font-size:10px}.btn-complete,.btn-delete,.btn-edit{font-size:8px}}@media screen and (max-width: 280px){.app-wrapper{width:80%;min-width:auto}.task-input{width:40%;font-size:7.5px}.btn-add{width:25%;font-size:10px}.list{width:25%;font-size:7.5px}.btn-complete,.btn-delete,.btn-edit{font-size:7px}}